Create navigational menus to structure page layout and improve user flow.
Usage
Import
import { Navigation } from '@passfort/castle'
Example
A simple navigation menu with multiple items and links.
<Navigation border="1px solid" borderColor="N100">
<Navigation.Item>Default</Navigation.Item>
<Navigation.Item isActive>isActive</Navigation.Item>
<Navigation.Item href="http://www.google.com">Link</Navigation.Item>
</Navigation>
live example
Navigation with Header and Title
Add a header and title to provide context and structure to your navigation.
<Navigation>
<Navigation.Header>Nav Header</Navigation.Header>
<Navigation.Title>Navigation Title</Navigation.Title>
<Navigation.Item>Item 1</Navigation.Item>
<Navigation.Item>Item 2</Navigation.Item>
</Navigation>
live example
Expandable Navigation Sections
Use Navigation.Expandable to create collapsible sections with multiple items.
<Navigation>
<Navigation.Expandable title={<Navigation.Title>Services</Navigation.Title>}>
<Navigation.Item href="/consulting">Consulting</Navigation.Item>
<Navigation.Item href="/development">Development</Navigation.Item>
<Navigation.Item href="/design">Design</Navigation.Item>
</Navigation.Expandable>
<Navigation.Expandable title={<Navigation.Title>Resources</Navigation.Title>}>
<Navigation.Item href="/docs">Documentation</Navigation.Item>
<Navigation.Item href="/api">API Reference</Navigation.Item>
<Navigation.Item href="https://github.com" isExternal>
GitHub
</Navigation.Item>
</Navigation.Expandable>
</Navigation>
live example
