Dropdown Menu

Displays a menu of items that users can select from when triggered.

Installation

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

Usage

use std::time::Duration;
use leptos::prelude::*;
use biji_ui::components::menu;

#[component]
pub fn MyDropdownMenu() -> impl IntoView {
    view! {
        <menu::Menu
            positioning={menu::Positioning::Bottom}
            hide_delay={Duration::from_millis(200)}
        >
            <menu::Trigger class="rounded border px-3 py-1.5 text-sm">
                "Open menu"
            </menu::Trigger>
            <menu::Content
                class="z-50 flex flex-col p-1 w-48 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"
            >
                <menu::Item class="px-2 py-1.5 text-sm rounded-sm hover:bg-accent data-[highlighted]:bg-muted">
                    "Profile"
                </menu::Item>
                <menu::Item class="px-2 py-1.5 text-sm rounded-sm hover:bg-accent data-[highlighted]:bg-muted">
                    "Settings"
                </menu::Item>
                <menu::Item
                    disabled=true
                    class="px-2 py-1.5 text-sm rounded-sm data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
                >
                    "Billing"
                </menu::Item>
            </menu::Content>
        </menu::Menu>
    }
}

API Reference

Name	Type	Default	Description
class	String	""	CSS class applied to the menu root element.
disabled	bool	false	Disables the entire menu and its trigger when true.
allow_loop	bool	false	When true, keyboard navigation wraps from the last item back to the first and vice versa.
positioning	Positioning	BottomStart	Where to position the content relative to the trigger.
hide_delay	Duration	200ms	How long to wait before unmounting the content after closing begins. Should match your CSS transition duration.
avoid_collisions	AvoidCollisions	Flip	How the menu reacts when it would overflow the viewport.
prevent_scroll	bool	false	When true, prevents the page from scrolling while the menu is open.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the 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 the value true when the menu is open.

Keyboard Navigation

Key	Description
`ArrowDown`	Moves focus to the next item in the menu.
`ArrowUp`	Moves focus to the previous item in the menu.
`ArrowRight`	Opens the focused submenu and moves focus to its first item.
`ArrowLeft`	Closes the current submenu and returns focus to its trigger.
`Enter`	Activates the focused item (clicks the inner button or link).
`Escape`	Closes the menu.