# Dropdown A composable dropdown component that can handle both simple navigation menus as well as complex action menus with checkboxes, radios, and submenus. ```blade Options New post Name Date Popularity Draft Published Archived Delete ``` ## Navigation menus Display a simple set of links in a dropdown menu. > [!TIP] > Use the `navmenu` component for a simple collections of links. Otherwise, use the `menu` component for action menus that require keyboard navigation, submenus, etc. ```blade Account Profile Billing Logout Delete ``` ## Positioning Customize the position of the dropdown menu via the `position` and `align` props. You can first pass the base position: `top`, `bottom`, `left`, and `right`, then an alignment modifier like `start`, `center`, or `end`. ```blade ``` ## Offset & gap Customize the offset/gap of the dropdown menu via the `offset` and `gap` props. These properties accept values in pixels. ```blade ``` ## Keyboard hints Add keyboard shortcut hints to menu items to teach users how to navigate your app faster. ```blade Options Save Duplicate Delete ``` ## Checkbox items Select one or many menu options. ```blade Permissions Read Write Delete ``` ## Radio items Select a single menu option. ```blade Sort by Latest activity Date created Most popular ``` ## Groups Visually group related menu items with a separator line. ```blade Options View Transfer Publish Share Delete ``` ## Groups with headings Group options under headings to make them more discoverable. ```blade Options Profile Permissions Transactions Payouts Refunds Logout ``` ## Submenus Nest submenus for more condensed menus. ```blade Options Name Date Popularity Draft Published Archived Delete ``` ## Keep open Menus typically close when an item is clicked, however, you can add the `keep-open` attribute to the `menu` component to keep it open. ```blade Filter Draft Published Archived ``` If you want the menu to only stay open when a specific item is clicked, you can add the `keep-open` attribute to the item instead. This works with: - `menu.item` - `menu.checkbox` - `menu.radio` - `menu.radio.group` - `menu.submenu` ```blade Filters Draft Published Archived Clear ``` ## Related - [Navbar](https://fluxui.dev/components/navbar) - Build responsive navigation bars with dropdown menus - [Profile](https://fluxui.dev/components/profile) - Show user avatars and profile information - [Button](https://fluxui.dev/components/button) - Interactive controls for forms and UI actions ## Reference ### flux:dropdown **Prop:** - `position` - Position of the dropdown menu. Options: `top`, `right`, `bottom` (default), `left`. - `align` - Alignment of the dropdown menu. Options: `start`, `center`, `end`. Default: `start`. - `offset` - Offset in pixels from the trigger element. Default: `0`. - `gap` - Gap in pixels between trigger and menu. Default: `4`. **Attribute:** - `data-flux-dropdown` - Applied to the root element for styling and identification. ### flux:menu A complex menu component that supports keyboard navigation, submenus, checkboxes, and radio buttons. **Prop:** - `keep-open` - Prevents the menu from closing when any item inside of it is clicked. **Slot:** - `default` - The menu items, separators, and submenus. **Attribute:** - `data-flux-menu` - Applied to the root element for styling and identification. ### flux:menu.item **Prop:** - `icon` - Name of the icon to display at the start of the item. - `icon:trailing` - Name of the icon to display at the end of the item. - `icon:variant` - Variant of the icon. Options: `outline`, `solid`, `mini`, `micro`. - `kbd` - Keyboard shortcut hint displayed at the end of the item. - `suffix` - Text displayed at the end of the item. - `variant` - Visual style of the item. Options: `default`, `danger`. - `disabled` - If `true`, prevents interaction with the menu item. - `keep-open` - Prevents the menu from closing when this item is selected. **Attribute:** - `data-flux-menu-item` - Applied to the root element for styling and identification. - `data-active` - Applied when the item is hovered/active. ### flux:menu.submenu **Prop:** - `heading` - Text displayed as the submenu heading. - `icon` - Name of the icon to display at the start of the submenu. - `icon:trailing` - Name of the icon to display at the end of the submenu. - `icon:variant` - Variant of the icon. Options: `outline`, `solid`, `mini`, `micro`. - `keep-open` - Prevents the submenu from closing when any item inside of it is selected. **Slot:** - `default` - The submenu items (checkboxes, radio buttons, etc.). ### flux:menu.separator A horizontal line that separates menu items. ### flux:menu.checkbox.group **Prop:** - `wire:model` - Binds the checkbox group to a Livewire property. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. **Slot:** - `default` - The checkboxes. ### flux:menu.checkbox **Prop:** - `wire:model` - Binds the checkbox to a Livewire property. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. - `checked` - If `true`, the checkbox is checked by default. - `disabled` - If `true`, prevents interaction with the checkbox. - `keep-open` - Prevents the menu from closing when this checkbox is selected. **Attribute:** - `data-active` - Applied when the checkbox is hovered/active. - `data-checked` - Applied when the checkbox is checked. ### flux:menu.radio.group **Prop:** - `wire:model` - Binds the radio group to a Livewire property. See the [wire:model documentation](https://livewire.laravel.com/docs/wire-model) for more information. - `keep-open` - Prevents the menu from closing when any radio button in this group is selected. **Slot:** - `default` - The radio buttons. ### flux:menu.radio **Prop:** - `checked` - If `true`, the radio button is selected by default. - `disabled` - If `true`, prevents interaction with the radio button. - `keep-open` - Prevents the menu from closing when this radio button is selected. **Attribute:** - `data-active` - Applied when the radio button is hovered/active. - `data-checked` - Applied when the radio button is selected.