Component

navbar

dx components add navbar

A navbar component for navigation between pages.

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_icons::lucide::ChevronDown;
use dioxus_primitives::navbar::{
    self, NavbarContentProps, NavbarItemProps, NavbarNavProps, NavbarProps, NavbarTriggerProps,
};

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

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

#[component]
pub fn NavbarTrigger(props: NavbarTriggerProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/navbar/style.css") }
        navbar::NavbarTrigger { class: "dx-navbar-trigger", attributes: props.attributes,
            {props.children}
            ChevronDown {
                class: "dx-navbar-expand-icon",
                size: "20px",
                stroke: "var(--secondary-color-4)",
            }
        }
    }
}

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

#[component]
pub fn NavbarItem(props: NavbarItemProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/navbar/style.css") }
        navbar::NavbarItem {
            class: "dx-navbar-item".to_string(),
            index: props.index,
            value: props.value,
            disabled: props.disabled,
            new_tab: props.new_tab,
            to: props.to,
            active_class: props.active_class,
            attributes: props.attributes,
            on_select: props.on_select,
            onclick: props.onclick,
            onmounted: props.onmounted,
            {props.children}
        }
    }
}

Usage notes

The Navbar component can be used to display a navigation bar with collapsible sections.

Component Structure

// The Navbar component wraps the entire menu bar and contains the individual menus in the order of their index.
Navbar {
    // The NavbarNav contains the individual menus that can be opened.
    NavbarNav {
        // 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.
        NavbarTrigger {
            // 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.
        NavbarContent {
            // Each menubar item represents an individual items in the menu.
            NavbarItem {
                // 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

Navbar accepts a dir: Option<Direction> prop. Its top-level trigger row is always horizontal, so ArrowLeft/ArrowRight between nav items always swaps under RTL, matching Menubar's identical shape. See the rtl variant.

Variants

Alternative examples for common configurations.

rtl