Create navigational menus to structure page layout and improve user flow.
Usage
Import
import { Navigation } from '@passfort/castle'
Example
A basic navigation menu with multiple items, including an expandable item.
<Navigation>
<Navigation.Item>Nav item 1</Navigation.Item>
<Navigation.Item isExpandable>
<Navigation.Title>Nav item 2</Navigation.Title>
<Navigation.Item href="#example">Sub-item 1</Navigation.Item>
</Navigation.Item>
<Navigation.Item isExternal href="https://google.com">
Nav item 3
</Navigation.Item>
</Navigation>
live example
Expandable with Subtitle
Adds a subtitle to an expandable item, useful for additional context within the navigation.
<Navigation>
<Navigation.Item isExpandable type="framed">
<Navigation.Title>Nav item 1</Navigation.Title>
<Navigation.Subtitle>Subtitle for item 1</Navigation.Subtitle>
<Navigation.Item>Sub-item 1</Navigation.Item>
<Navigation.Item>Sub-item 2</Navigation.Item>
</Navigation.Item>
</Navigation>
live example
Disabled item
Marks a navigation item as disabled, making it non-interactive.
<Navigation>
<Navigation.Item isDisabled href="https://google.com" isExternal>
Disabled item
</Navigation.Item>
<Navigation.Item href="https://google.com" isExternal>
Active item
</Navigation.Item>
</Navigation>
live example