---
title: Menu
desc: List of links displayed vertically. For use with Dropdowns and popovers.
ico: mdi:menu-open
keywords:
  - dropdown
  - form

props:
  - class: .prs-menu
    type: component
    desc: For <ul>
  - class: .prs-menu-item
    type: part
    desc: For button/label container
  - class: .prs-menu-item-label
    type: part
    desc: For text within item
  - class: .prs-menu-icon
    type: part
    desc: For icon wrapper
  - class: .prs-menu-search
    type: part
    desc: For search field

controls:
  - name: search
    type: toggle
    label: Search
    desc: Show search field.
    default: false

  - name: leading
    type: radio
    label: Leading element
    desc: Leading element.
    default: none
    options:
      - none
      - icon
      - checkbox

  - name: small
    type: toggle
    label: Small
    desc: Reduce vertical spacing.
    default: false

  - name: selected
    type: toggle
    label: Selected
    desc: Menu item selected state checkmark icon.
    default: false

  - name: state
    type: radio
    label: State
    desc: Menu item states will happen automatically when using valid markup. We do include classes to force hover and focus states but you should avoid using these in your application.
    default: default
    options:
      - default
      - hover
      - focus
      - disabled

preview: |
  <div class="prs-menu" :class="small && 'prs-menu-sm'">
    <div x-show="search" class="prs-menu-search">
      <label class="prs-input">
        <input type="search" placeholder="Search" />
        <span class="prs-label-text">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" role="img" fill="currentColor"><use href="/_assets/prs-icons.svg#nav-search"></use></svg>
        </span>
      </label>
    </div>
    <menu>
      <li>
        <button x-show="leading !== 'checkbox'" @click.prevent="selected = !selected" class="prs-menu-item" :class="{
          'prs-menu-item_hover': state === 'hover',
          'prs-menu-item_focus': state === 'focus',
        }" :disabled="state === 'disabled'">
          <span x-show="leading === 'icon'" class="prs-menu-icon"><iconify-icon icon="mdi:folder" class="iconify" noobserver></iconify-icon></span>
          <span class="prs-menu-item-label" aria-label="Truncate very long menu item labels" title="Truncate very long menu item labels">Truncate very long menu item labels</span>
          <span x-show="selected" class="prs-menu-icon" aria-label="Selected"><iconify-icon icon="mdi:check" class="iconify" noobserver></iconify-icon></span>
        </button>
        <label x-show="leading === 'checkbox'" class="prs-menu-item" :class="{
          'prs-menu-item_hover': state === 'hover',
          'prs-menu-item_focus': state === 'focus',
          'prs-menu-item_disabled': state === 'disabled',
        }">
          <input type="checkbox" class="prs-checkbox" x-model="selected" :disabled="state === 'disabled'" />
          <span class="prs-menu-item-label" aria-label="Truncate very long menu item labels" title="Truncate very long menu item labels">Truncate very long menu item labels</span>
        </label>
      </li>
      <li>
        <button x-show="leading !== 'checkbox'" class="prs-menu-item">
          <span x-show="leading === 'icon'" class="prs-menu-icon" aria-label="Selected"><iconify-icon icon="mdi:folder" class="iconify" noobserver></iconify-icon></span>
          <span class="prs-menu-item-label">Menu item</span>
        </button>
        <label x-show="leading === 'checkbox'" class="prs-menu-item">
          <input type="checkbox" class="prs-checkbox" />
          <span class="prs-menu-item-label">Menu item</span>
        </label>
      </li>
    </menu>
  </div>

code:
  html: |
    <div class="prs-menu{small}">
      {search}<menu>
        <li>
          <{type} class="prs-menu-item{hover}{focus}"{disabled_btn}>
            {checkbox}{icon}<span class="prs-menu-item-label">Menu item</span>{selected}
          </{type}>
        </li>
      </menu>
    </div>
  logic:
    small: "this.small ? ' prs-menu-sm' : ''"
    search: "this.search ? '<label class=\"prs-menu-search\" aria-label=\"Search\"><input type=\"search\" class=\"prs-input\" /></label>\\n  ' : ''"
    type: "this.leading === 'checkbox' ? 'label' : 'button'"
    checkbox: "this.leading === 'checkbox' ? '<input type=\"checkbox\"{checked}{disabled_check} />\\n        ' : ''"
    icon: "this.leading === 'icon' ? '<span class=\"prs-menu-icon\"><svg /></span>\\n        ' : ''"
    selected: "this.selected && this.leading !== 'checkbox' ? '\\n        <span class=\"prs-menu-icon\" aria-label=\"Selected\"><svg /></span>' : ''"
    checked: "this.selected ? ' checked' : ''"
    hover: "this.state === 'hover' ? ' prs-menu-item_hover' : ''"
    focus: "this.state === 'focus' ? ' prs-menu-item_focus' : ''"
    disabled_btn: "(this.state === 'disabled' && this.leading !== 'checkbox') ? ' disabled' : ''"
    disabled_check: "(this.state === 'disabled' && this.leading === 'checkbox') ? ' disabled' : ''"
---