Menu
Menu with vertical or horizontal layout
Introduction
Menu is versatile and can be used for internal navigation on a page, e.g Table of content, navigate between different sections, or used as an alternative to StepBar. You can also add the menu to a Sticky component, keeping navigation accessible at all times.
Variants
- Vertical (default): Typically used for side navigation, table of contents, or forms with multiple sections.
- Horizontal: Ideal for top navigation bars or when space is limited horizontally, or to create a stepper-like interface.
Interactive demo
Try the interactive demo below to explore the menu component.
Steps
As menu can be used as a stepper-like interface, we have different states for steps that can be used inside menu items.
- Completed: Indicates that the step has been finished.
- Active: Highlights the current step the user is on.
- Incomplete: Denotes steps that are yet to be started.
- Default: A step that haven't been started.
Usage
Menu can be wrapped inside other elements, like Section or Accordion, to create distinct areas on a page.
Learn more about menu usage in the Wizard documentation.
Custom icon
A custom icon can be used inside the menu item.
Menu in components
Menu can be used within various components. See the links below for more information on how Menu can be integrated with these components