DIOXUS.md

🧬 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

Property	Type	Description	Default
logo_src	&'static str	Path to the logo image.	""
logo_alt	&'static str	Alt text for the logo.	"Logo"
logo_link	&'static str	Optional link for the logo.	"/"
menus	Vec<MenuItem>	List of top-level menu items.	[]
show_search	bool	Displays the search input if true.	false
search_state	Signal<String>	Optional shared state for the search input.	None
search_placeholder	&'static str	Placeholder for the search input.	"Search"
button_text	&'static str	Text for the CTA button.	""
button_href	&'static str	Link for the CTA button.	"#"
button_target	&'static str	Target attribute for CTA link (e.g. _blank).	"_self"
show_mega_menu	bool	Enables the mega menu when true.	false
mega_menu_items	Vec<MegaMenuItem>	Items to show in the mega menu.	[]
show_profile_menu	bool	Shows the profile dropdown menu.	false
dropdown_items	Vec<DropdownItem>	Items for the profile dropdown.	[]
profile_image_url	&'static str	URL for profile image.	""
profile_button_text	&'static str	Text label for profile menu toggle.	"Profile"

Styling Props

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

Property	Type	Description	Default Style
navbar_class	&'static str	Class for outer navbar element.	""
navbar_style	&'static str	Style for outer navbar element.	display: flex; justify-content: space-between; ...
container_class	&'static str	Class for max-width inner container.	""
container_style	&'static str	Style for inner container.	max-width: 1200px; margin: auto; ...
inner_class	&'static str	Class for the content wrapper.	""
inner_style	&'static str	Style for the content wrapper.	display: flex; align-items: center; ...
logo_class	&'static str	Class for the logo.	""
logo_style	&'static str	Style for the logo.	height: 40px;
menu_item_class	&'static str	Class for menu items.	""
menu_item_style	&'static str	Style for each menu item.	padding: 0.5rem 1rem; color: black;
dropdown_class	&'static str	Class for dropdown menu.	""
dropdown_style	&'static str	Style for dropdown menu.	position: absolute; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
dropdown_item_class	&'static str	Class for dropdown items.	""
dropdown_item_style	&'static str	Style for dropdown items.	padding: 0.5rem 1rem;
search_input_class	&'static str	Class for search input.	""
search_input_style	&'static str	Style for search input.	padding: 0.5rem; font-size: 1rem;
button_class	&'static str	Class for CTA button wrapper.	""
button_style	&'static str	Style for CTA button wrapper.	margin-left: 1rem;
button_link_class	&'static str	Class for CTA anchor inside button.	""
button_link_style	&'static str	Style for CTA anchor inside button.	background: #007bff; color: white; ...
more_button_class	&'static str	Class for the mega menu "More" button.	""
more_button_style	&'static str	Style for the mega menu "More" button.	font-weight: bold; border: none;
mega_menu_class	&'static str	Class for mega menu wrapper.	""
mega_menu_style	&'static str	Style for mega menu wrapper.	position: absolute; padding: 0;
mega_menu_card_class	&'static str	Class for each mega menu card.	""
mega_menu_card_style	&'static str	Style for each mega menu card.	background: white; display: flex; ...
menu_toggle_class	&'static str	Class for mobile hamburger icon.	""
menu_toggle_style	&'static str	Style for mobile hamburger icon.	flex-direction: column; gap: 5px;
line_class	&'static str	Class for hamburger icon lines.	""
line_style	&'static str	Style for hamburger icon lines.	width: 25px; height: 2px; background: black;

💡 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.