Dropdown

Dropdown menus with keyboard navigation.

Basic dropdown

Add na-dropdown on the wrapper element.

<div class="na-dropdown" na-dropdown>
  <button class="na-button na-button-outline-primary">Actions</button>
  <div class="na-dropdown-menu">
    <a href="#" class="na-dropdown-item">Edit</a>
    <a href="#" class="na-dropdown-item">Duplicate</a>
    <div class="na-dropdown-divider"></div>
    <a href="#" class="na-dropdown-item na-dropdown-item-danger">Delete</a>
  </div>
</div>

With header & active item

<div class="na-dropdown-menu">
  <div class="na-dropdown-header">Logged in as Jane</div>
  <a href="#" class="na-dropdown-item na-active">Profile</a>
  <a href="#" class="na-dropdown-item na-dropdown-item-disabled">Billing (soon)</a>
  <div class="na-dropdown-divider"></div>
  <a href="#" class="na-dropdown-item">Sign out</a>
</div>

Alignment

<!-- Align to right edge -->
<div class="na-dropdown-menu na-dropdown-menu-right">...</div>

<!-- Open upward -->
<div class="na-dropdown-menu na-dropdown-menu-top">...</div>

<!-- Centre aligned -->
<div class="na-dropdown-menu na-dropdown-menu-center">...</div>

Class reference

Class / Attribute	Description
`na-dropdown`	Wrapper (position:relative)
`na-dropdown-menu`	Hidden menu panel
`na-dropdown-item`	Menu action link
`na-dropdown-divider`	Horizontal rule separator
`na-dropdown-header`	Non-interactive label
`na-dropdown-menu-right / center / top`	Positioning modifiers
`na-dropdown-item-danger`	Red danger action
`na-dropdown-item-disabled`	Greyed-out action
`na-active`	Highlighted current item
`na-open`	Applied when menu is open