Dropdown
Dropdowns are small panels that open on demand. They let users access additional content and actions without cluttering the page.
Drop Menu
Use Combination of Dropdown and List to create a Drop Menu
- Profile
- Settings
- Keyboard shortcuts
- Company Profile
- Team
- TeamInvite colleagues
- Log out
<NVDropdown Label="Options">
<NVDropdownActivator>
<NVButton Icon="dots-vertical" />
</NVDropdownActivator>
<ChildContent>
<NVList Select>
<NVListItem Stack GutterX="3">
<NVIcon Small Name="user" />
<span>Profile</span>
</NVListItem>
<NVListItem Stack GutterX="3">
<NVIcon Small Name="settings" />
<span>Settings</span>
</NVListItem>
<NVListItem Stack GutterX="3">
<NVIcon Small Name="keyboard" />
<span>Keyboard shortcuts</span>
</NVListItem>
<NVListItem Stack GutterX="3" Divider>
<NVIcon Small Name="building" />
<span>Company Profile</span>
</NVListItem>
<NVListItem Stack GutterX="3">
<NVIcon Small Name="users" />
<span>Team</span>
</NVListItem>
<NVListItem Stack GutterX="3">
<NVIcon Small Name="user-plus" />
<span>TeamInvite colleagues</span>
</NVListItem>
<NVListItem Stack GutterX="3" Divider TextColor="red-500" HoverBackgroundColor="red-500" HoverTextColor="white">
<NVIcon Small Name="logout" />
<span>Log out</span>
</NVListItem>
</NVList>
</ChildContent>
</NVDropdown><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-icon nv-btn-level-1 neutral">
<i class="nv-icon nv-icon-dots-vertical"></i>
</button>
</div>
<div class="nv-dropdown-wrapper nv-panel nv-panel-level-3">
<ul class="nv-list neutral nv-list-select">
<li class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-user nv-icon-sm"></i>
<span>Profile</span>
</li>
<li class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-settings nv-icon-sm"></i>
<span>Settings</span>
</li>
<li class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-keyboard nv-icon-sm"></i>
<span>Keyboard shortcuts</span>
</li>
<li data-list-divider class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-building nv-icon-sm"></i>
<span>Company Profile</span>
</li>
<li class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-users nv-icon-sm"></i>
<span>Team</span>
</li>
<li class="nv-stack gutter-x-3">
<i class="nv-icon nv-icon-user-plus nv-icon-sm"></i>
<span>TeamInvite colleagues</span>
</li>
<li data-list-divider class="nv-stack gutter-x-3 text-red-500 hover:bg-red-500 hover:text-white">
<i class="nv-icon nv-icon-logout nv-icon-sm"></i>
<span>Log out</span>
</li>
</ul>
</div>
</div>
</div>