use leptos::prelude::*;
use biji_ui::components::navigation_menu;

#[component]
pub fn MyNav() -> impl IntoView {
    view! {
        <navigation_menu::Root>
            <navigation_menu::List class="flex items-center gap-1">
                <navigation_menu::Item value="docs">
                    <navigation_menu::Trigger class="px-3 py-1.5 text-sm rounded-md transition hover:bg-accent">
                        "Docs"
                    </navigation_menu::Trigger>
                    <navigation_menu::Content
                        class="z-50 min-w-48 rounded-lg border shadow-md transition bg-background border-border origin-[var(--biji-transform-origin)]"
                        show_class="opacity-100 scale-100 duration-150 ease-out"
                        hide_class="opacity-0 scale-95 duration-100 ease-in"
                    >
                        <div class="grid gap-1 p-2">
                            <navigation_menu::Link
                                href="/docs/getting-started"
                                class="block px-3 py-2 text-sm rounded-md hover:bg-accent"
                            >
                                "Getting Started"
                            </navigation_menu::Link>
                            <navigation_menu::Link
                                href="/docs/accordion"
                                class="block px-3 py-2 text-sm rounded-md hover:bg-accent"
                            >
                                "Accordion"
                            </navigation_menu::Link>
                        </div>
                    </navigation_menu::Content>
                </navigation_menu::Item>
                <navigation_menu::Item value="github">
                    <navigation_menu::Link
                        href="https://github.com/biji-ui/biji-ui"
                        class="block px-3 py-1.5 text-sm rounded-md transition hover:bg-accent"
                    >
                        "GitHub"
                    </navigation_menu::Link>
                </navigation_menu::Item>
            </navigation_menu::List>
        </navigation_menu::Root>
    }
}

API Reference

Root

Name	Type	Default	Description
class	String	""	CSS class applied to the `<nav>` element.
aria_label	Option<String>	None	Value of the `aria-label` attribute on the `<nav>` element.
positioning	Positioning	BottomStart	Where to render each Content panel relative to its Trigger.
avoid_collisions	AvoidCollisions	Flip	How content panels react when they would overflow the viewport.
close_delay	Duration	200ms	How long after the pointer leaves a Trigger or Content before the panel closes.
hide_delay	Duration	200ms	How long to wait before unmounting the content after closing begins (should match your CSS transition duration).

List

Name	Type	Default	Description
class	String	""	CSS class applied to the `<ul>` element.

Item

Name	Type	Default	Description
value	String	—	Unique string that identifies this item. Must match the corresponding Content panel.
class	String	""	CSS class applied to the `<li>` element.
disabled	bool	false	When true, the item's Trigger cannot be interacted with.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the `<button>` element.

Content

Name	Type	Default	Description
class	String	""	CSS class applied in both open and closed states.
show_class	String	""	CSS class applied when the panel is open.
hide_class	String	""	CSS class applied while the panel is closing.

Link

Name	Type	Default	Description
href	String	—	The URL the link navigates to.
class	String	""	CSS class applied to the `<a>` element.
disabled	bool	false	When true, renders `aria-disabled` and `data-disabled` on the anchor.
close_on_click	bool	true	When true, clicking the link closes any open content panel.

Data Attributes

Attribute	Description
data-state	"open" when the item's panel is visible; "closed" otherwise. Present on Trigger.
data-disabled	Present on Item, Trigger, and Link when the item is disabled.
data-highlighted	Present on Trigger when it holds roving-tabindex focus.

Keyboard Navigation

Key	Description
`Tab`	Moves focus into and out of the navigation menu. When a panel is open, Tab moves into the panel.
`ArrowRight`	Moves focus to the next Trigger or Link. If a panel is open, opens the next item's panel.
`ArrowLeft / ArrowUp`	Moves focus to the previous Trigger or Link. If a panel is open, opens the previous item's panel.
`ArrowDown`	Opens the current item's Content panel and focuses the first focusable element inside it.
`Home`	Moves focus to the first Trigger or Link.
`End`	Moves focus to the last Trigger or Link.
`Enter / Space`	Toggles the current item's Content panel.
`Escape`	Closes the open panel and returns focus to its Trigger.

Navigation Menu

Installation

Usage

API Reference

Root

List

Item

Trigger

Content

Link

Data Attributes

Keyboard Navigation