dropdown-separator

A divider between dropdown items.

Example

Ibiza

Right-click the card, or focus it and press Shift+F10.

Race day
15 Nov 2026
Entries
1,204

Laravel

<x-admin::context-menu label="Actions for Ibiza" tabindex="0">
    <x-admin::card title="Ibiza" description="Right-click the card, or focus it and press Shift+F10.">
        <x-admin::dl :items="['Race day' => '15 Nov 2026', 'Entries' => '1,204']" />
    </x-admin::card>
    <x-slot:menu>
        <x-admin::dropdown-item icon="edit">Edit race</x-admin::dropdown-item>
        <x-admin::dropdown-item icon="copy">Duplicate</x-admin::dropdown-item>
        <x-admin::dropdown-separator />
        <x-admin::dropdown-item icon="trash" destructive>Delete race</x-admin::dropdown-item>
    </x-slot:menu>
</x-admin::context-menu>

Other stacks

React and Vue: import { DropdownSeparator } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-context" tabindex="0" data-adm-context>
    <section class="adm-card">
            <div class="adm-card__header">
            <div class="adm-card__heading">
                <h2 class="adm-card__title">Ibiza</h2>                <p class="adm-card__description">Right-click the card, or focus it and press Shift+F10.</p>            </div>
                    </div>
        <div class="adm-card__content"><dl class="adm-dl">
            <dt>Race day</dt>
        <dd>15 Nov 2026</dd>
            <dt>Entries</dt>
        <dd>1,204</dd>
        
</dl></div>
    </section>
    <div class="adm-menu adm-context__menu" popover="manual" aria-label="Actions for Ibiza"><button type="button" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>Edit race</button>
        <button type="button" class="adm-menu__item"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg>Duplicate</button>
        <div class="adm-menu__sep" role="separator"></div>
        <button type="button" class="adm-menu__item adm-menu__item--destructive"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg>Delete race</button></div>
</div>