Dropdowns are small panels that open on demand. They let users access additional content and actions without cluttering the page.
Color Color define the background color of the default activator (button).
Type Default Value string null
Options
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" Color ="primary" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 primary" >
<span > Options</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" >
<nv-dropdown label ="Options" color ="primary" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" >
<NvDropDown label ="Options" color ="primary" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > NVDropdownActivator Change the default activator (button).
Type Default Value RenderFragment null
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" >
<NVDropdownActivator >
<p > activator</p >
</NVDropdownActivator >
<ChildContent >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</ChildContent >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<p > activator</p >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-dropdown hoist >
<nv-button slot ="trigger" caret > <p > activator</p > </nv-button >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown > <NvDropDown hoist >
<NvButton slot ="trigger" caret >
<p > activator</p >
</NvButton >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown > DropWidth Set the width of the dropped element.
Type Default Value string null
Options
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" DropWidth ="400px" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Options</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" style ="width:400px" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" >
<nv-dropdown label ="Options" dropwidth ="400px" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" >
<NvDropDown label ="Options" dropWidth ="400px" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > KeepOpen When true, the dropdown stay open when clicking inside the drop content.
Type Default Value bool false
Options
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" KeepOpen >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Options</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-keep-open >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" >
<nv-dropdown label ="Options" keepopen >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" >
<NvDropDown label ="Options" keepOpen >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > Label Label define the label of the default activator (button).
Type Default Value string null
Options
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Options</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" >
<nv-dropdown label ="Options" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" >
<NvDropDown label ="Options" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > Open When true, the drop will be visible.
Type Default Value bool false
Options
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" >
<NVDropdown Label ="Options" Open >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Options</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-show ="true" style ="opacity: 1; transform:translate(45px, 10px)" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" >
<nv-dropdown label ="Options" open >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" >
<NvDropDown label ="Options" open >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > OpenChanged EventCallback emit when the open Param changed (for dual binding).
Placement Placement is used to set the position of the drop down content.
Type Default Value string bottom
Bottom
Account settings
Support
License
Sign out
Bottom Start
Account settings
Support
License
Sign out
Bottom End
Account settings
Support
License
Sign out
Top
Account settings
Support
License
Sign out
Top Start
Account settings
Support
License
Sign out
Top End
Account settings
Support
License
Sign out
<NVStack Height ="200px" Items ="start" Justify ="center" Gutter ="2" MB ="4" >
<NVDropdown Label ="Bottom" Placement ="bottom" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
<NVDropdown Label ="Bottom Start" Placement ="bottom-start" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
<NVDropdown Label ="Bottom End" Placement ="bottom-end" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack >
<NVStack Height ="200px" Items ="start" Justify ="center" Gutter ="2" >
<NVDropdown Label ="Top" Placement ="top" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
<NVDropdown Label ="Top Start" Placement ="top-start" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
<NVDropdown Label ="Top End" Placement ="top-end" >
<NVList Select >
<NVListItem > Account settings</NVListItem >
<NVListItem > Support</NVListItem >
<NVListItem > License</NVListItem >
<NVListItem > Sign out</NVListItem >
</NVList >
</NVDropdown >
</NVStack > <div class ="nv-stack justify-center items-start gutter-x-2 mb-4" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Bottom</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="bottom" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Bottom Start</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="bottom-start" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Bottom End</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="bottom-end" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div >
<div class ="nv-stack justify-center items-start gutter-x-2" >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Top</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="top" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Top Start</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="top-start" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
<div class ="nv-dropdown" data-js-doc-dropdown >
<div class ="nv-dropdown-activator" >
<button class ="nv-btn nv-btn-md nv-btn-level-1 neutral" >
<span > Top End</span >
<i class ="nv-btn-tail-icon nv-icon nv-icon-chevron-down nv-icon-xs" > </i >
</button >
</div >
<div class ="nv-dropdown-wrapper nv-panel nv-panel-level-3" data-js-doc-dropdown-placement ="top-end" data-show ="false" >
<ul class ="nv-list neutral nv-list-select" >
<li > Account settings</li >
<li > Support</li >
<li > License</li >
<li > Sign out</li >
</ul >
</div >
</div >
</div > <nv-stack height ="200px" gutter ="2" mb ="4" >
<nv-dropdown label ="Options" placement ="bottom" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
<nv-dropdown label ="Options" placement ="bottom-start" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
<nv-dropdown label ="Options" placement ="bottom-end" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
<nv-dropdown label ="Options" placement ="top" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
<nv-dropdown label ="Options" placement ="top-start" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
<nv-dropdown label ="Options" placement ="top-end" >
<nv-list select >
<nv-listitem value ="account settings" > Account settings</nv-listitem >
<nv-listitem value ="support" > Support</nv-listitem >
<nv-listitem value ="license" > License</nv-listitem >
<nv-listitem value ="sign out" > Sign out</nv-listitem >
</nv-list >
</nv-dropdown >
</nv-stack > <NvStack height ="200px" gutter ={2} mb ="4" >
<NvDropDown label ="Options" placement ="bottom" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
<NvDropDown label ="Options" placement ="bottom-start" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
<NvDropDown label ="Options" placement ="bottom-end" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
<NvDropDown label ="Options" placement ="top" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
<NvDropDown label ="Options" placement ="top-start" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
<NvDropDown label ="Options" placement ="top-end" >
<NvList select >
<NvListItem value ="account settings" > Account settings</NvListItem >
<NvListItem value ="support" > Support</NvListItem >
<NvListItem value ="license" > License</NvListItem >
<NvListItem value ="sign out" > Sign out</NvListItem >
</NvList >
</NvDropDown >
</NvStack > 