Menus
The menu component displays a vertical sidebar-esque menu that transforms into a select tag on mobile devices. Currently menus only have support a vertical layout. It's possible that other layouts will be added in the future.
Using Menus
To use a menu, use the <ui:menu> tag with <ui:menu-item> components inside it.
Basic Menu
Menu Properties
| Property | Type | Default | Description |
|---|---|---|---|
mobileLabel |
string |
Navigation |
The label shown in the mobile select dropdown. |
size |
Size |
Size::SM |
Controls the maximum width of the menu. |
Mobile Label
The label shown in the mobile select dropdown. This is used for accessibility, labeling, and as a disabled option in the select dropdown.
Size
The size property controls the maximum width of the menu (defaulting to sm size). Supported sizes are xs, sm, md, and lg.
Menu with XS Size
Menu Items
Menu items are used to display a single menu item in the menu. They can be customized in various ways by using the following properties:
Properties
| Property | Type | Default | Description |
|---|---|---|---|
href |
string |
null |
The URL the menu item links to. Required |
icon |
string |
null |
Include an Icon before the menu item's content. |
iconVariant |
string |
outline |
The icon variant to use. micro, mini, solid, or outline |
active |
boolean |
request()->url() === $href |
Whether the menu item is active. By default, it's active if the current URL matches the href. |
badge |
integer|string |
null |
A badge to display on the menu item. |
showZero |
boolean |
false |
Whether to show the badge when its value is 0. |
badgeColor |
Color |
Color::Secondary |
The color of the badge. |
badgeVariant |
Variant |
Variant::Solid |
The variant of the badge. |
badgeSize |
Size |
Size::XS |
The size of the badge. |
Href
The href property is used to specify the URL that the menu item links to. It is required!
Icons
The icon property is used to include an icon before the menu item's content.
Menu Items with Icons
Icon Variants
You can also specify the icon variant using the icon variant property.
Customizing the Icon Variant
Active State
The active property indicates the currently active menu item. By default, a menu item is active if the current URL matches its href.
You can also use custom logic to determine if a menu item is active:
Badges
The badge property is used to display a badge on the menu item. This is useful for showing counts or status indicators.
Menu Items with Badges
Badge Customization
You can customize the badge appearance using the badgeColor, badgeVariant, badgeRadius, and badgeSize properties. For more information on the values these properties support, read the Badges documentation page.
Showing Zeroes
By default, badges are hidden when their value is 0. You can show zeroes by setting the showZero property to true.
Gap
The gap property controls the spacing between menu items. Possible values are none, xs, sm, md, and lg.