Navs Vertical
A vertical navigation component for sidebar menus with support for icons, arrows, and expandable sub-items. Easily create hierarchical navigation structures with a clean, modern design.
Component Setup
Create or update your NavsVertical component
Copy this code to create your NavsVertical component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
With Icon and Arrow
Enhanced navigation items with icons and arrow indicators for better visual hierarchy.
With Sub Items
Advanced navigation with expandable sections and nested sub-items using Accordion integration.
API Reference
The NavsVertical component is a compound component that consists of several parts. Each part has its own set of props that can be used to customize its appearance and behavior.
NavsVertical.Root
The container component that provides the main vertical navigation structure.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | "string" | "undefined" | The default active item value. |
className | "string" | "undefined" | Additional CSS classes to apply to the root container. |
children | "ReactNode" | "undefined" | The content of the navigation component, typically NavsVertical.List. |
NavsVertical.List
A container for navigation items.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the list element. |
children | "ReactNode" | "undefined" | The content of the list, typically NavsVertical.Item components. |
NavsVertical.Item
Individual navigation item that can be styled as active and can contain icons and arrows.
| Prop | Type | Default | Description |
|---|---|---|---|
href | "string" | "undefined" | The URL that the navigation item links to. |
active | "boolean" | "false" | When true, applies active styling to the item. |
arrow | "boolean" | "false" | When true, automatically adds an arrow icon to the item. |
className | "string" | "undefined" | Additional CSS classes to apply to the item. |
children | "ReactNode" | "undefined" | The content of the navigation item. |
NavsVertical.SubList
A container for nested navigation items, typically used within expandable sections.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the sub-list. |
children | "ReactNode" | "undefined" | The content of the sub-list, typically NavsVertical.SubItem components. |
NavsVertical.SubItem
Individual nested navigation item with simplified styling for hierarchical navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
href | "string" | "undefined" | The URL that the sub-item links to. |
active | "boolean" | "false" | When true, applies active styling to the sub-item. |
className | "string" | "undefined" | Additional CSS classes to apply to the sub-item. |
children | "ReactNode" | "undefined" | The content of the sub-item. |
NavsVertical.Icon
Icon component that can be used within a navigation item.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement | ReactNode" | "undefined" | The icon component to render. |
className | "string" | "undefined" | Additional CSS classes to apply to the icon. |
children | "ReactNode" | "undefined" | The content of the icon, used if no 'as' prop is provided. |
NavsVertical.Arrow
Arrow icon component that can be used within a navigation item, typically to indicate a dropdown or submenu.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement | ReactNode" | "undefined" | The arrow icon component to render. |
className | "string" | "undefined" | Additional CSS classes to apply to the arrow icon. |
children | "ReactNode" | "undefined" | The content of the arrow icon, used if no 'as' prop is provided. |