Dropdown

<div class="sui-dropdown">
  <button class="sui-btn sui-dropdown-toggle" data-sui-dropdown>Options</button>
  <div class="sui-dropdown-menu">
    <button class="sui-dropdown-item">Profile</button>
    <button class="sui-dropdown-item">Settings</button>
    <button class="sui-dropdown-item">Notifications</button>
  </div>
</div>

<div class="sui-dropdown">
  <button class="sui-btn sui-btn-primary sui-dropdown-toggle" data-sui-dropdown>Primary</button>
  <div class="sui-dropdown-menu">...</div>
</div>

<div class="sui-dropdown">
  <button class="sui-btn sui-btn-success sui-dropdown-toggle" data-sui-dropdown>Success</button>
  <div class="sui-dropdown-menu">...</div>
</div>

<div class="sui-dropdown">
  <button class="sui-btn sui-btn-outline sui-btn-primary sui-dropdown-toggle" data-sui-dropdown>Outline</button>
  <div class="sui-dropdown-menu">...</div>
</div>

<div class="sui-dropdown-split">
  <button class="sui-btn sui-btn-primary">Save</button>
  <button class="sui-btn sui-btn-primary sui-dropdown-toggle" data-sui-dropdown></button>
  <div class="sui-dropdown-menu">
    <button class="sui-dropdown-item">Save as draft</button>
    <button class="sui-dropdown-item">Save and publish</button>
    <button class="sui-dropdown-item">Save as template</button>
  </div>
</div>

<div class="sui-dropdown">
  <button class="sui-btn sui-dropdown-toggle" data-sui-dropdown>Navigate</button>
  <div class="sui-dropdown-menu">
    <a href="/docs" class="sui-dropdown-item">Documentation</a>
    <a href="/api" class="sui-dropdown-item">API Reference</a>
    <a href="/examples" class="sui-dropdown-item">Examples</a>
  </div>
</div>

<div class="sui-dropdown-menu">
  <span class="sui-dropdown-header">File</span>
  <button class="sui-dropdown-item">New</button>
  <button class="sui-dropdown-item">Open</button>
  <div class="sui-dropdown-divider"></div>
  <span class="sui-dropdown-header">Edit</span>
  <button class="sui-dropdown-item">Cut</button>
  <button class="sui-dropdown-item">Copy</button>
  <div class="sui-dropdown-divider"></div>
  <button class="sui-dropdown-item" style="color:var(--sui-danger);">Delete</button>
</div>

<button class="sui-dropdown-item active">Dashboard</button>
<button class="sui-dropdown-item">Settings</button>
<button class="sui-dropdown-item disabled">Admin Panel</button>

<!-- Down (default) -->
<div class="sui-dropdown">...</div>

<!-- Up -->
<div class="sui-dropdown sui-dropup">...</div>

<!-- Right -->
<div class="sui-dropdown sui-dropend">...</div>

<!-- Left -->
<div class="sui-dropdown sui-dropstart">...</div>

<!-- Start-aligned (default) -->
<div class="sui-dropdown-menu">...</div>

<!-- End-aligned -->
<div class="sui-dropdown-menu sui-dropdown-menu-end">...</div>

<!-- Small -->
<div class="sui-dropdown sui-dropdown-sm">
  <button class="sui-btn sui-dropdown-toggle" data-sui-dropdown>Small</button>
  <div class="sui-dropdown-menu">
    <button class="sui-dropdown-item">Action One</button>
    <button class="sui-dropdown-item">Action Two</button>
    <button class="sui-dropdown-item">Action Three</button>
  </div>
</div>

<!-- Large -->
<div class="sui-dropdown sui-dropdown-lg">
  <button class="sui-btn sui-dropdown-toggle" data-sui-dropdown>Large</button>
  <div class="sui-dropdown-menu">
    <button class="sui-dropdown-item">Action One</button>
    <button class="sui-dropdown-item">Action Two</button>
    <button class="sui-dropdown-item">Action Three</button>
  </div>
</div>