Navigation Menu
Demo
Functionality
- NavHorizontal and NavVertical components provide versatile navigation options suited for different layout needs.
- Support for both link and group type navigation items, enabling complex navigation structures.
- Customizable appearance and behavior, fitting various design requirements.
NavHorizontal
Props
| Prop | Type | Description |
|---|---|---|
items | NavItem[] | An array of navigation items, each can be a link or a group containing sub-items. |
locale | string (optional) | Locale of the links. |
customLinkComponent | LinkComponent (optional) | Custom link component for the navigation links. |
classNames | { root?: string; list?: string; item?: string; trigger?: string; content?: string } (optional) | Custom class names for different parts of the NavHorizontal. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall NavHorizontal component.list: CSS class for styling the list of navigation items.item: CSS class for styling each navigation item.trigger: CSS class for styling the trigger element for sub-items.content: CSS class for styling the content area of sub-items.
NavVertical
Props
| Prop | Type | Description |
|---|---|---|
items | NavItem[] | An array of navigation items, each can be a link or a group containing sub-items. |
selectedId | string (optional) | The ID of the currently selected navigation item. |
showLabel | boolean (optional) | Whether to show labels next to icons. |
hideIcon | boolean (optional) | Whether to hide icons in navigation items. |
locale | string (optional) | Locale of the links. |
customLinkComponent | LinkComponent (optional) | Custom link component for the navigation links. |
classNames | { root?: string; list?: string; item?: string; iconContainer?: string } (optional) | Custom class names for different parts of the NavVertical. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall NavVertical component.list: CSS class for styling the list of navigation items.item: CSS class for styling each navigation item.iconContainer: CSS class for styling the icon container in each item.
NavItem
A union type that can be either a NavLink or a NavGroup. This allows for creating a navigation structure that can have both individual links and grouped links.
NavLink
Represents an individual navigation link.
type: Optional. Specifies the type of the item, typically 'link'.id: Unique identifier for the navigation link.title: The display text for the link.description: Optional. Additional information about the link.href: Optional. The URL that the link points to.icon: Optional. An icon displayed alongside the link.onClick: Optional. A function to execute when the link is clicked.
NavGroup
Defines a group of navigation links.
type: Specifies the type of the item, 'group'.id: Unique identifier for the group.title: The display text for the group.description: Optional. Additional information about the group.icon: Optional. An icon displayed alongside the group title.onClick: Optional. A function to execute when the group title is clicked.subItems: An array ofNavLinkitems belonging to the group.