<a href="http://localhost:3000" class="svelte-1lb2d7q"><!-- HTML_TAG_START --><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"></path></svg><!-- HTML_TAG_END --> </a> <div data-svelte-h="svelte-co5qnq">X UI</div>
Overview
Menu
Select
Accordion
Modal
Multiselect

Menu

A versatile menu for navigation.

Examples

Use as a component

Basic example

Disabled items

Open set to true

Item 1
Item 2
Item 3

Trigger a function when the menu popup is closed

Ignore the internal logic with static property

Use as a composable

Component API

Menu

Prop Description Type Default
component If the value is false only children of the main component will be rendered boolean false
isStatic If true the components becomes a shell and ignores all the internal logic boolean false
open Whether or not the menu is open boolean false
items Menu items { id: number | string, value: string }[] []
disabledItems Disabled menu items number[] | string[] []
onClose Triggers when the dropdown menu is closed function () => {}
onItemClick Triggers when a menu item is clicked function (id: string | number) => {}
onButtonClick Triggers when the menu button is clicked function () => {}

Menu Button

Prop Description Type Default
onMenuButtonClick Triggers when the button is clicked function () => {}

Menu Dropdown

Prop Description Type Default
open Whether or not the dropdown is visible boolean false

Menu Item

Prop Description Type Default
item Menu item { id: number | string, value: string } / (required)
isDisabled Whether the item is disabled boolean false
onClick Triggers when the item is clicked function (id: string | number) => {}