Navigation

Menu

The menu component presents a vertical or horizontal list of links for easy navigation within the application or website.

Basic example

Default

Below example shows default menu component.

Variants

Icon menu

Below example shows menu with icons.

With icons only

Below example shows menu with icons only.

With icons only (horizontal)

Use the responsive class `menu-horizontal` with the component class `menu` for a horizontal menu.

With tooltip

Below example shows menu with tooltip.

With disabled items

Below example shows menu with disabled items.

With badges

Below example shows menu with badges.

With item

Below example shows menu with item.

Sizes

Basic sizes

Utilize the responsive class `menu-{size}` where `size = xs|sm|md|lg|xl` to render menus of varying sizes.

Illustrations

Simple

Below example shows simple menu without rounded borders & padding.

With title

Below example shows menu with title.

With title as parent

Below example shows menu with title as parent.

With sub-menus

Below example shows menu with sub-menus.

Collapsible sub-menus — With Collapse

Below example shows menu with collapsible sub-menus.

With horizontal sub-menu

Below example shows horizontal menu with sub-menu.

Mega menu with sub-menu

Below example shows mega menu with sub-menu.

Menu with dropdown

Below example shows menu with dropdown.

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`menu`	component	Base class for menu container.
`menu-title`	part	Base class for menu title.
`menu-disabled`	state	Makes menu item (`li`) disabled.
`menu-active`	state	Makes element inside menu item (`li`) active.
`menu-xs`	size	Extra small size.
`menu-sm`	size	Small size.
`menu-md`	size	Medium(default) size.
`menu-lg`	size	Large size.
`menu-xl`	size	Extra-Large size.
`menu-vertical`	direction	Vertical menu (default).
`menu-horizontal`	direction	Horizontal menu.