Menubar

Displays a menu to the user, which can consist of links or functions, triggered by a button.

Installation

biji-ui = { version = "0.5.0", features = ["menubar"] }

Usage

use std::time::Duration;
use leptos::{portal::Portal, prelude::*};
use biji_ui::components::menubar;

#[component]
pub fn MyMenubar() -> impl IntoView {
    view! {
        <menubar::Root class="flex" allow_item_loop=true>
            <menubar::Menu
                class="relative"
                positioning={menubar::Positioning::BottomStart}
                hide_delay={Duration::from_millis(200)}
            >
                <menubar::Trigger class="py-1.5 px-2 text-sm rounded-sm hover:bg-accent">
                    "File"
                </menubar::Trigger>
                <Portal>
                    <menubar::Content
                        class="z-50 flex flex-col p-1 w-56 rounded-md border shadow-md bg-background"
                        show_class="opacity-100 transition duration-150 ease-in"
                        hide_class="opacity-0 transition duration-200 ease-out"
                    >
                        <menubar::Item class="py-1.5 px-2 text-sm rounded-sm data-[highlighted]:bg-muted hover:bg-accent">
                            "New file"
                        </menubar::Item>
                        <menubar::Item
                            disabled=true
                            class="py-1.5 px-2 text-sm rounded-sm data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
                        >
                            "New window"
                        </menubar::Item>
                    </menubar::Content>
                </Portal>
            </menubar::Menu>
            <menubar::Menu
                class="relative"
                positioning={menubar::Positioning::BottomStart}
                hide_delay={Duration::from_millis(200)}
            >
                <menubar::Trigger class="py-1.5 px-2 text-sm rounded-sm hover:bg-accent">
                    "Edit"
                </menubar::Trigger>
                <Portal>
                    <menubar::Content
                        class="z-50 flex flex-col p-1 w-56 rounded-md border shadow-md bg-background"
                        show_class="opacity-100 transition duration-150 ease-in"
                        hide_class="opacity-0 transition duration-200 ease-out"
                    >
                        <menubar::Item class="py-1.5 px-2 text-sm rounded-sm data-[highlighted]:bg-muted hover:bg-accent">
                            "Undo"
                        </menubar::Item>
                        <menubar::Item class="py-1.5 px-2 text-sm rounded-sm data-[highlighted]:bg-muted hover:bg-accent">
                            "Redo"
                        </menubar::Item>
                    </menubar::Content>
                </Portal>
            </menubar::Menu>
        </menubar::Root>
    }
}

API Reference

Root

Name	Type	Default	Description
class	String	""	CSS class applied to the menubar root element.
allow_menu_loop	bool	false	When true, horizontal keyboard navigation wraps from the last menu back to the first and vice versa.
allow_item_loop	bool	false	When true, vertical keyboard navigation within a menu wraps from the last item back to the first.
prevent_scroll	bool	false	When true, prevents the page from scrolling while any menu is open.

Name	Type	Default	Description
class	String	""	CSS class applied to the individual menu container.
disabled	bool	false	Disables the menu trigger when true.
positioning	Positioning	BottomStart	Where to position the menu content relative to its trigger.
avoid_collisions	AvoidCollisions	Flip	How the menu reacts when it would overflow the viewport.
hide_delay	Duration	200ms	How long to wait before unmounting the content after closing begins. Should match your CSS transition duration.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the menu trigger 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 menu is open.
hide_class	String	""	CSS class applied while the menu is closing.

Item

Name	Type	Default	Description
class	String	""	CSS class applied to the item element.
disabled	bool	false	Prevents interaction with the item and applies data-disabled.

SubMenu

Name	Type	Default	Description
class	String	""	CSS class applied to the submenu wrapper element.
disabled	bool	false	Disables the submenu trigger and prevents it from opening.
positioning	Positioning	RightStart	Where to position the submenu content.
hide_delay	Duration	200ms	How long to wait before unmounting the submenu content after closing begins.

SubMenuTrigger

Name	Type	Default	Description
class	String	""	CSS class applied to the submenu trigger element.

SubMenuContent

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

Positioning

Name	Type	Default	Description
TopStart	Positioning		Above the trigger, aligned to its left edge.
Top	Positioning		Above the trigger, centered.
TopEnd	Positioning		Above the trigger, aligned to its right edge.
RightStart	Positioning		To the right of the trigger, aligned to its top edge.
Right	Positioning		To the right of the trigger, centered.
RightEnd	Positioning		To the right of the trigger, aligned to its bottom edge.
BottomStart	Positioning	default	Below the trigger, aligned to its left edge.
Bottom	Positioning		Below the trigger, centered.
BottomEnd	Positioning		Below the trigger, aligned to its right edge.
LeftStart	Positioning		To the left of the trigger, aligned to its top edge.
Left	Positioning		To the left of the trigger, centered.
LeftEnd	Positioning		To the left of the trigger, aligned to its bottom edge.

AvoidCollisions

Name	Type	Default	Description
Flip	AvoidCollisions	default	Keeps the preferred side. Flips to the opposite side if it does not fit. If neither fits, uses whichever has more space.
AutoPlace	AvoidCollisions		Always places the menu on the side with the most available space, regardless of the preferred positioning.
None	AvoidCollisions		No collision detection. Always uses the exact positioning specified.

Data Attributes

Attribute	Description
data-highlighted	Present on Trigger, Item, and SubMenuTrigger when they have keyboard focus or are hovered.
data-disabled	Present on Trigger, Item, and SubMenuTrigger when disabled is true.
data-open	Present on Trigger with value true when its menu is open.

Keyboard Navigation

Key	Description
`ArrowLeft`	Moves focus to the previous menu trigger in the bar (follows the open state).
`ArrowRight`	Moves focus to the next menu trigger in the bar (follows the open state).
`ArrowDown`	Opens the focused menu and moves focus to its first item.
`ArrowUp`	Opens the focused menu and moves focus to its last item.
`Enter`	Opens the focused menu trigger and focuses the first item.
`Escape`	Closes all open menus and returns focus to the menubar.