Navs Horizontal
A horizontal navigation component with support for icons, arrows, and dropdowns. Easily create user-friendly menus using NavsHorizontal's compound component structure.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your NavsHorizontal component
Copy this code to create your NavsHorizontal 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 Icons
Enhanced navigation items with icons and arrow indicators for improved visual clarity.
With Dropdown
Advanced navigation with dropdown menus for organizing complex navigation structures.
API Reference
The NavsHorizontal 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.
NavsHorizontal.Root
The container component that provides the main navigation structure.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the root container. |
children | "ReactNode" | "undefined" | The content of the navigation component, typically NavsHorizontal.List. |
NavsHorizontal.List
A scrollable container for navigation items with an animated active indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the list element. |
wrapperClassName | "string" | "undefined" | Additional CSS classes to apply to the scrollable wrapper around the list. |
children | "ReactNode" | "undefined" | The content of the list, typically NavsHorizontal.Item components. |
NavsHorizontal.Item
Individual navigation item that can be styled as active and can contain icons.
| 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 and shows the animated indicator. |
asChild | "boolean" | "false" | When true, the component will render its child directly, transferring all props to it. |
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. |
NavsHorizontal.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. |
NavsHorizontal.ArrowIcon
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. |