Component

menubar

dx components add menubar

A menubar component for a collection of menu items.

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::menubar::{
    self, MenubarContentProps, MenubarItemProps, MenubarMenuProps, MenubarProps,
    MenubarTriggerProps,
};

#[component]
pub fn Menubar(props: MenubarProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/menubar/style.css") }
        menubar::Menubar {
            class: "dx-menubar",
            disabled: props.disabled,
            roving_loop: props.roving_loop,
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn MenubarMenu(props: MenubarMenuProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/menubar/style.css") }
        menubar::MenubarMenu {
            class: "dx-menubar-menu",
            index: props.index,
            disabled: props.disabled,
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn MenubarTrigger(props: MenubarTriggerProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/menubar/style.css") }
        menubar::MenubarTrigger { class: "dx-menubar-trigger", attributes: props.attributes, {props.children} }
    }
}

#[component]
pub fn MenubarContent(props: MenubarContentProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/menubar/style.css") }
        menubar::MenubarContent {
            class: "dx-menubar-content",
            id: props.id,
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn MenubarItem(props: MenubarItemProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/menubar/style.css") }
        menubar::MenubarItem {
            class: "dx-menubar-item",
            index: props.index,
            value: props.value,
            disabled: props.disabled,
            text_value: props.text_value,
            on_select: props.on_select,
            attributes: props.attributes,
            {props.children}
        }
    }
}

Usage notes

The Menubar component can be used to display a menu bar with collapsible menus.

Component Structure

// The Menubar component wraps the entire menu bar and contains the individual menus in the order of their index.
Menubar {
    // The MenubarMenu contains the individual menus that can be opened.
    MenubarMenu {
        // The index of the menu, used to determine the order in which menus are displayed.
        index: 0,
        // The menubar trigger is the element that will display the menu when activated.
        MenubarTrigger {
            // The content of the trigger button
            {children}
        }
        // The menubar content contains all the items that will be displayed in the menu when it is opened.
        MenubarContent {
            // Each menubar item represents an individual items in the menu.
            MenubarItem {
                // The value of the item which will be passed to the on_select callback when the item is selected.
                value: "",
                on_select: |value: String| {
                    // This callback is triggered when the item is selected.
                    // The value parameter contains the value of the selected item.
                },
            }
        }
    }
}

Direction / RTL

Menubar accepts a dir: Option<Direction> prop. Its top-level trigger row is always horizontal, so ArrowLeft/ArrowRight between menus always swaps under RTL. See the rtl variant.

Variants

Alternative examples for common configurations.

rtl