Skip to content

Commit 774e5bb

Browse files
wiseaidevwiseaidev
authored
feat: add dioxus support && update docs (#4)
1 parent 43d8292 commit 774e5bb

File tree

12 files changed

+4098
-2
lines changed

12 files changed

+4098
-2
lines changed

‎DIOXUS.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# 🧬 Navbar Dioxus Usage
2+
3+
Adding navbar to your project is simple:
4+
5+
1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions.
6+
7+
1. Add the **navbar** library to your dependencies by including it in your `Cargo.toml` file:
8+
9+
```sh
10+
cargo add navbar --features=dio
11+
```
12+
13+
1. Import the `Navbar` component into your Dioxus application.
14+
15+
## 🛠️ Usage
16+
17+
The following is a basic example showing how to use the `Navbar` component in your Dioxus app:
18+
19+
```rust
20+
use dioxus::prelude::*;
21+
use navbar::dioxus::{Navbar, Menu, DropdownItem, MegaMenuItem};
22+
23+
#[component]
24+
fn App() -> Element {
25+
rsx! {
26+
Navbar {
27+
show_search: true,
28+
show_mega_menu: true,
29+
show_profile_menu: true,
30+
search_placeholder: "Search courses, docs...",
31+
mega_menu_items: vec![
32+
MegaMenuItem { title: "Docs", description: "Official docs", link: "/docs" },
33+
MegaMenuItem { title: "Tutorials", description: "Step-by-step guides", link: "/tutorials" },
34+
MegaMenuItem { title: "API", description: "Full API Reference", link: "/api" },
35+
],
36+
dropdown_items: vec![
37+
DropdownItem { id: 1, link: "/account", label: "Account", icon: None },
38+
DropdownItem { id: 2, link: "/notifications", label: "Notifications", icon: None },
39+
DropdownItem { id: 3, link: "/logout", label: "Logout", icon: None },
40+
],
41+
menus: vec![
42+
Menu { id: 1, link: "/", name: "Home", icon_start: None, icon_end: None },
43+
Menu { id: 2, link: "/explore", name: "Explore", icon_start: None, icon_end: None },
44+
Menu { id: 3, link: "/pricing", name: "Pricing", icon_start: None, icon_end: None },
45+
],
46+
}
47+
}
48+
}
49+
```
50+
51+
## 🧩 Props
52+
53+
### `Navbar` Component Props
54+
55+
#### Main Props
56+
57+
| Property | Type | Description | Default |
58+
| --------------------- | ------------------- | ---------------------------------------------- | ----------- |
59+
| `logo_src` | `&'static str` | Path to the logo image. | `""` |
60+
| `logo_alt` | `&'static str` | Alt text for the logo. | `"Logo"` |
61+
| `logo_link` | `&'static str` | Optional link for the logo. | `"/"` |
62+
| `menus` | `Vec<MenuItem>` | List of top-level menu items. | `[]` |
63+
| `show_search` | `bool` | Displays the search input if `true`. | `false` |
64+
| `search_state` | `Signal<String>` | Optional shared state for the search input. | `None` |
65+
| `search_placeholder` | `&'static str` | Placeholder for the search input. | `"Search"` |
66+
| `button_text` | `&'static str` | Text for the CTA button. | `""` |
67+
| `button_href` | `&'static str` | Link for the CTA button. | `"#"` |
68+
| `button_target` | `&'static str` | Target attribute for CTA link (e.g. `_blank`). | `"_self"` |
69+
| `show_mega_menu` | `bool` | Enables the mega menu when `true`. | `false` |
70+
| `mega_menu_items` | `Vec<MegaMenuItem>` | Items to show in the mega menu. | `[]` |
71+
| `show_profile_menu` | `bool` | Shows the profile dropdown menu. | `false` |
72+
| `dropdown_items` | `Vec<DropdownItem>` | Items for the profile dropdown. | `[]` |
73+
| `profile_image_url` | `&'static str` | URL for profile image. | `""` |
74+
| `profile_button_text` | `&'static str` | Text label for profile menu toggle. | `"Profile"` |
75+
76+
#### Styling Props
77+
78+
```sh
79+
+--------------------------------------------------------------------------+
80+
| [Navbar] | <-- `navbar_class` & `navbar_style`
81+
| |
82+
| +--------------------------------------------------------------+ | <-- `container_class` & `container_style`
83+
| | [Logo] [Menu Items] [Search] [CTA Button] [Profile Menu] | |
84+
| +--------------------------------------------------------------+ |
85+
| |
86+
+--------------------------------------------------------------------------+
87+
```
88+
89+
| Property | Type | Description | Default Style |
90+
| ---------------------- | -------------- | -------------------------------------- | ------------------------------------------------------------ |
91+
| `navbar_class` | `&'static str` | Class for outer navbar element. | `""` |
92+
| `navbar_style` | `&'static str` | Style for outer navbar element. | `display: flex; justify-content: space-between; ...` |
93+
| `container_class` | `&'static str` | Class for max-width inner container. | `""` |
94+
| `container_style` | `&'static str` | Style for inner container. | `max-width: 1200px; margin: auto; ...` |
95+
| `inner_class` | `&'static str` | Class for the content wrapper. | `""` |
96+
| `inner_style` | `&'static str` | Style for the content wrapper. | `display: flex; align-items: center; ...` |
97+
| `logo_class` | `&'static str` | Class for the logo. | `""` |
98+
| `logo_style` | `&'static str` | Style for the logo. | `height: 40px;` |
99+
| `menu_item_class` | `&'static str` | Class for menu items. | `""` |
100+
| `menu_item_style` | `&'static str` | Style for each menu item. | `padding: 0.5rem 1rem; color: black;` |
101+
| `dropdown_class` | `&'static str` | Class for dropdown menu. | `""` |
102+
| `dropdown_style` | `&'static str` | Style for dropdown menu. | `position: absolute; box-shadow: 0 4px 8px rgba(0,0,0,0.1);` |
103+
| `dropdown_item_class` | `&'static str` | Class for dropdown items. | `""` |
104+
| `dropdown_item_style` | `&'static str` | Style for dropdown items. | `padding: 0.5rem 1rem;` |
105+
| `search_input_class` | `&'static str` | Class for search input. | `""` |
106+
| `search_input_style` | `&'static str` | Style for search input. | `padding: 0.5rem; font-size: 1rem;` |
107+
| `button_class` | `&'static str` | Class for CTA button wrapper. | `""` |
108+
| `button_style` | `&'static str` | Style for CTA button wrapper. | `margin-left: 1rem;` |
109+
| `button_link_class` | `&'static str` | Class for CTA anchor inside button. | `""` |
110+
| `button_link_style` | `&'static str` | Style for CTA anchor inside button. | `background: #007bff; color: white; ...` |
111+
| `more_button_class` | `&'static str` | Class for the mega menu "More" button. | `""` |
112+
| `more_button_style` | `&'static str` | Style for the mega menu "More" button. | `font-weight: bold; border: none;` |
113+
| `mega_menu_class` | `&'static str` | Class for mega menu wrapper. | `""` |
114+
| `mega_menu_style` | `&'static str` | Style for mega menu wrapper. | `position: absolute; padding: 0;` |
115+
| `mega_menu_card_class` | `&'static str` | Class for each mega menu card. | `""` |
116+
| `mega_menu_card_style` | `&'static str` | Style for each mega menu card. | `background: white; display: flex; ...` |
117+
| `menu_toggle_class` | `&'static str` | Class for mobile hamburger icon. | `""` |
118+
| `menu_toggle_style` | `&'static str` | Style for mobile hamburger icon. | `flex-direction: column; gap: 5px;` |
119+
| `line_class` | `&'static str` | Class for hamburger icon lines. | `""` |
120+
| `line_style` | `&'static str` | Style for hamburger icon lines. | `width: 25px; height: 2px; background: black;` |
121+
122+
## 💡 Notes
123+
124+
- The navbar is **responsive** by default and adapts to screen size.
125+
- Hamburger toggle appears when the window width is <= 768px.
126+
- Click outside to auto-close mobile and dropdown menus via event listeners.
127+
- You can fully customize the layout using `style` and `class` props for each section.
128+
- Mega menu, search, CTA button, and profile menu are **optional** features that can be toggled via props.
129+
- All callback-based interactions like search input or menu toggling are handled with `use_signal`, `Callback`, and `use_effect`.
130+
- Supports accessibility with custom labels, alt tags, and interactive behaviors.

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
| Framework | Live Demo |
2222
| --- | --- |
2323
| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://navbar-rs.netlify.app) |
24-
| Dioxus | TODO |
24+
| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://navbar-dio.netlify.app) |
2525
| Leptos | TODO |
2626

2727
## 📜 Intro
@@ -43,7 +43,7 @@ The following features make Navbar a must-have for modern WASM apps:
4343
<!-- absolute url for docs.rs cause YEW.md is not included in crate -->
4444
Refer to [our guide](https://github.com/opensass/navbar/blob/main/YEW.md) to integrate this component into your Yew app.
4545

46-
## 🧬 Dioxus Usage (TODO)
46+
## 🧬 Dioxus Usage
4747

4848
<!-- absolute url for docs.rs cause DIOXUS.md is not included in crate -->
4949
Refer to [our guide](https://github.com/opensass/navbar/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.

‎examples/dioxus/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
target/**/*
2+
dist/**/*

0 commit comments

Comments
 (0)