Components
Navigation Menu
A navigation component typically displayed at the top of every website.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| links | NavLink[] | [] | Array of navigation links with label, href, and ariaLabel. |
| toggleSidebar | () => void | light | Function to toggle the sidebar. |
| isSidebarOpen | boolean | false | State of the sidebar (open/close). |
| brand | React.ReactNode | - | Brand element, can include logo or text. |
| className | string | - | Additional classes for styling. |
| rightContent | React.ReactNode | - | Content to be displayed on the right side of the navbar. |
Best Practices
- Ensure navigation links are descriptive and provide clear indications of their destination.
- Maintain consistency in the design of the navigation bar across different pages.
- Include a visible focus state for interactive elements to improve accessibility.
- Ensure the navigation bar is responsive and works well on different screen sizes.