Crate yew_navbar

Source
Expand description

§Yew Navbar - Documentation

Welcome to the official documentation for Yew Navbar. This library provides a customizable Yew component for creating responsive top-level navigation bar with various styling options.

§Usage

To use this library, add the following dependency to your Cargo.toml file:

cargo add yew-navbar

To integrate the library into your Yew application, you can use the Navbar component. Here’s a basic example of how to use it:

use yew::prelude::*;
use yew_navbar::Navbar;

#[function_component]
pub fn MyNavbar() -> Html {
    let menus = vec![/* define your menu items here */];

    html! {
        <Navbar menus={menus} />
        // Your component logic here...
    }
}

For more detailed information, check the examples provided in the library.

§Configuration

The Navbar component allows you to customize its appearance through the NavbarProps structure. You can adjust properties such as menu items, button text, styling classes, and more. Refer to the NavbarProps documentation for detailed configuration options.

use yew::prelude::*;
use yew_navbar::{NavbarProps, Navbar};

let navbar_props = NavbarProps {
    menus: vec![/* define your menu items here */],
    // Add other properties as needed...
    // ...,
    ..NavbarProps::default()
};

let navbar_component = html! {
    <Navbar ..navbar_props />
};

The NavbarProps structure is used to configure the appearance and behavior of the Navbar component.

§Properties

  • menus: A vector of Menu structs representing the navigation menu items.
  • button_href: The href attribute for the optional button in the navbar.
  • button_text: The text content for the optional button in the navbar.
  • navbar_class: CSS class for styling the main navbar container.
  • logo_class: CSS class for styling the logo container.
  • menu_toggle_class: CSS class for styling the menu toggle button.
  • line_class: CSS class for styling the lines of the menu toggle button.
  • flex_container_class: CSS class for styling the flex container of the navbar.
  • hidden_md_class: CSS class for hiding elements on medium-sized screens.
  • nav_class: CSS class for styling the navigation menu.
  • menu_item_class: CSS class for styling individual menu items.
  • button_class: CSS class for styling the optional button in the navbar.
  • button_link_class: CSS class for styling the optional button as a link.
  • dropdown_item_class: CSS class for styling items in the dropdown menu.
  • dropdown_class: CSS class for styling the dropdown menu container.
  • search_input_class: CSS class for styling the search input.
  • logo_src: The source URL for the logo image.
  • logo_alt: The alt text for the logo image.
  • logo_img_class: CSS class for styling the logo image.
  • logo_link: The href attribute for the logo link.

§Contribution

If you encounter any issues or have suggestions for improvements, feel free to contribute to the GitHub repository. We appreciate your feedback and involvement in making Yew Navbar better!

§Acknowledgments

Special thanks to the Yew community and contributors for such an amazing framework.

Structs§

Menu
Navbar
NavbarProps
Properties for the Navbar component