Skip to content
SmartHand Design Systemv0.1.1

Dropdown

CSS + PrelineNo design-system JS

A dropdown pairs the design system’s styling classes with Preline’s hs-dropdown behavior (open/close, positioning, keyboard).

Dropdown menu
Open ↗
components/dropdown.html
<div class="flex">
  <div class="hs-dropdown dropdown [--placement:bottom-right]" data-dropdown>
    <button
      type="button"
      class="hs-dropdown-toggle dropdown-trigger-default"
      data-dropdown-trigger
      aria-haspopup="menu"
      aria-expanded="false"
      aria-label="Open menu"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      </svg>
    </button>


    <div class="hs-dropdown-menu dropdown-menu" data-dropdown-menu role="menu">
      <div class="dropdown-menu-items" data-dropdown-menu-items>
        <button type="button" class="dropdown-menu-item" data-dropdown-menu-item role="menuitem">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415" />
            <path d="M16 5l3 3" />
          </svg>
          <span>Edit</span>
        </button>


        <button type="button" class="dropdown-menu-item" data-dropdown-menu-item role="menuitem">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path
              d="M7 9.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667l0 -8.666"
            />
            <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
          </svg>
          <span>Duplicate</span>
        </button>


        <button type="button" class="dropdown-menu-item button-ghost-negative" data-dropdown-menu-item role="menuitem">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M4 7l16 0" />
            <path d="M10 11l0 6" />
            <path d="M14 11l0 6" />
            <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
            <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
          </svg>
          <span>Delete</span>
        </button>
      </div>
    </div>
  </div>
</div>

Markup

Section titled “Markup”
<div class="dropdown hs-dropdown [--placement:bottom-right]" data-dropdown>
  <button type="button" class="dropdown-trigger-default hs-dropdown-toggle" data-dropdown-trigger>
    <!-- trigger icon -->
  </button>


  <div class="dropdown-menu hs-dropdown-menu" data-dropdown-menu role="menu">
    <div class="dropdown-menu-items" data-dropdown-menu-items>
      <button class="dropdown-menu-item" data-dropdown-menu-item>Edit</button>


      <button class="dropdown-menu-item button-ghost-negative" data-dropdown-menu-item>Delete</button>
    </div>
  </div>
</div>

Classes

Section titled “Classes”
Class Preline pair Role
dropdown hs-dropdown Container + placement ([--placement:…]).
dropdown-trigger-default hs-dropdown-toggle Ready-made secondary-button trigger.
dropdown-trigger-user hs-dropdown-toggle Avatar + name trigger (profile menus).
dropdown-menu hs-dropdown-menu The floating panel (hidden until open).
dropdown-menu-items — Vertical list wrapper.
dropdown-menu-item — A row; add data-active for the current one.
dropdown-menu-options / dropdown-menu-option — A horizontal icon-button group (e.g. the theme setter row); data-active highlights one.

Placement is set with [--placement:…] on the container: bottom-right, bottom-left, top-right, right-end, etc.