---
type: doc
title: Dropdown Menu
description: Native Liquid dropdown menu with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/dropdown-menu.liquid"
<div data-slot='dropdown-menu' data-default-value='featured' data-close-on-select='false'>
  <button type='button' data-slot='dropdown-menu-trigger' data-button data-variant='outline'>
    Menu

    <svg
      class='icon'
      data-slot='icon'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      stroke-width='2'
      stroke-linecap='round'
      stroke-linejoin='round'
      aria-hidden='true'
      focusable='false'
    >
      <circle cx='12' cy='12' r='1'/><circle cx='19' cy='12' r='1'/><circle cx='5' cy='12' r='1'/>
    </svg>
  </button>
  <div data-slot='dropdown-menu-portal'>
    <div data-slot='dropdown-menu-positioner'>
      <div data-slot='dropdown-menu-content' hidden>
        <p data-slot='dropdown-menu-label'>Sort by</p>

        <button type='button' data-slot='dropdown-menu-radio-item' data-value='featured'>
          Featured
          <span data-slot='dropdown-menu-item-indicator'>
            <svg
              class='icon'
              data-slot='icon'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              aria-hidden='true'
              focusable='false'
            >
              <path d='M20 6 9 17l-5-5'/>
            </svg>
          </span>
        </button>

        <button type='button' data-slot='dropdown-menu-radio-item' data-value='newest'>
          Newest
          <span data-slot='dropdown-menu-item-indicator'>
            <svg
              class='icon'
              data-slot='icon'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              aria-hidden='true'
              focusable='false'
            >
              <path d='M20 6 9 17l-5-5'/>
            </svg>
          </span>
        </button>

        <div data-slot='dropdown-menu-separator'></div>
        <button type='button' data-slot='dropdown-menu-checkbox-item' data-value='in_stock'>
          In stock only
          <span data-slot='dropdown-menu-item-indicator'>
            <svg
              class='icon'
              data-slot='icon'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              stroke-width='2'
              stroke-linecap='round'
              stroke-linejoin='round'
              aria-hidden='true'
              focusable='false'
            >
              <path d='M20 6 9 17l-5-5'/>
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/dropdown-menu.json https://ui.full.dev/r/liquid/icon.json https://ui.full.dev/r/liquid/button.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-popup' %}
{% render 'ui-triggers' %}
{% render 'ui-runtime' %}
{% render 'ui-dropdown-menu' %}
{% render 'ui-icon' %}
{% render 'ui-button' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/dropdown-menu.liquid) · [Theming](/liquid/docs/theming/)

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/dropdown-menu.json https://ui.full.dev/r/liquid/icon.json https://ui.full.dev/r/liquid/button.json
```