Sidenav

Rust UI Icons - ChevronLeftRust UI Icons - ChevronRight

Rust UI component that displays a sidenav.

  • Rust UI Icons - CopyCopy Demo
use leptos::prelude::*;

use crate::components::ui::sidenav::{Sidenav, SidenavH2, SidenavLink, SidenavSection};

#[component]
pub fn DemoSidenav() -> impl IntoView {
    view! {
        <Sidenav>
            <SidenavLink href="/">"Home"</SidenavLink>

            <SidenavSection>
                <SidenavLink href="#">"Posts"</SidenavLink>
                <SidenavLink href="#">"Comments"</SidenavLink>
                <SidenavLink href="#">"Social Networks"</SidenavLink>
            </SidenavSection>

            <SidenavSection>
                <SidenavH2>"Strategy"</SidenavH2>
                <SidenavLink href="#">"Calendar"</SidenavLink>
                <SidenavLink href="#">"Campaigns"</SidenavLink>
            </SidenavSection>

            <SidenavSection>
                <SidenavH2>"Content"</SidenavH2>
                <SidenavLink href="#">"Fragments"</SidenavLink>
                <SidenavLink href="#">"Mentions"</SidenavLink>
                <SidenavLink href="#">"Media Library"</SidenavLink>
            </SidenavSection>
        </Sidenav>
    }
}

Installation

You can run either of the following commands:

# cargo install ui-cli --force
ui add demo_sidenav
ui add sidenav

Update the imports to match your project setup.

Copy and paste the following code into your project:

components/ui/sidenav.rs

use leptos::prelude::*;
use leptos_ui::{a, clx};

mod components {
    use super::*;
    clx! {Sidenav, div, "flex flex-col gap-6 p-4 h-full bg-accent w-[250px]"}
    clx! {SidenavSection, div, "flex flex-col gap-2"}
    clx! {SidenavH2, h2, "text-sm font-medium text-muted-foreground"}
    a! {SidenavLink, "hover:bg-neutral-500 rounded-md transition-colors duration-200 p-1"}
}

pub use components::*;

Update the imports to match your project setup.

Usage

// Coming soon 🦀
Rust UI Icons - ChevronLeftSheetSkeletonRust UI Icons - ChevronRight