Edit Component

🧬 Navbar Dioxus Usage

Adding navbar to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the navbar library to your dependencies by including it in your Cargo.toml file:

   cargo add navbar --features=dio
   

3. Import the Navbar component into your Dioxus application.

🛠️ Usage

The following is a basic example showing how to use the Navbar component in your Dioxus app:

use dioxus::prelude::*;
use navbar::dioxus::{Navbar, Menu, DropdownItem, MegaMenuItem};

#[component]
fn App() -> Element {
    rsx! {
        Navbar {
            show_search: true,
            show_mega_menu: true,
            show_profile_menu: true,
            search_placeholder: "Search courses, docs...",
            mega_menu_items: vec![
                MegaMenuItem { title: "Docs", description: "Official docs", link: "/docs" },
                MegaMenuItem { title: "Tutorials", description: "Step-by-step guides", link: "/tutorials" },
                MegaMenuItem { title: "API", description: "Full API Reference", link: "/api" },
            ],
            dropdown_items: vec![
                DropdownItem { id: 1, link: "/account", label: "Account", icon: None },
                DropdownItem { id: 2, link: "/notifications", label: "Notifications", icon: None },
                DropdownItem { id: 3, link: "/logout", label: "Logout", icon: None },
            ],
            menus: vec![
                Menu { id: 1, link: "/", name: "Home", icon_start: None, icon_end: None },
                Menu { id: 2, link: "/explore", name: "Explore", icon_start: None, icon_end: None },
                Menu { id: 3, link: "/pricing", name: "Pricing", icon_start: None, icon_end: None },
            ],
        }
    }
}

🧩 Props

Navbar Component Props

Main Props

Styling Props

+--------------------------------------------------------------------------+
|                                [Navbar]                                  |  <-- `navbar_class` & `navbar_style`
|                                                                          |
|   +--------------------------------------------------------------+       |  <-- `container_class` & `container_style`
|   | [Logo] [Menu Items] [Search] [CTA Button] [Profile Menu]     |       |
|   +--------------------------------------------------------------+       |
|                                                                          |
+--------------------------------------------------------------------------+

💡 Notes

• The navbar is responsive by default and adapts to screen size.
• Hamburger toggle appears when the window width is <= 768px.
• Click outside to auto-close mobile and dropdown menus via event listeners.
• You can fully customize the layout using style and class props for each section.
• Mega menu, search, CTA button, and profile menu are optional features that can be toggled via props.
• All callback-based interactions like search input or menu toggling are handled with use_signal, Callback, and use_effect.
• Supports accessibility with custom labels, alt tags, and interactive behaviors.

Usage

CLI Usage

You can import Navbar directly into your project to customize and modify it using the opensass cli:

os add navbar dio

TODO