maud-ui64 components

Shell — Sidebar

Overview

MRR

$42,310

+12.4% vs last month

New customers

284

+8.1% vs last month

Active sessions

1,429

-3.2% vs last month

Churn

2.1%

-0.4% vs last month

Recent activity

  • SSofia Davis upgraded to the Pro plan2 min ago
  • MMateo Ortega invited 3 teammates14 min ago
  • JJin-Ho Lee published a new workflow37 min ago
  • AAmira Khan exported the Q1 revenue report1 hour ago

Usage

use maud_ui::blocks::shell::sidebar;
use maud::html;

sidebar::render(sidebar::Props {
    brand: html! { span { "Acme" } },
    active_path: "/dashboard".into(),
    nav_groups: vec![
        sidebar::NavGroup {
            label: None,
            items: vec![
                sidebar::NavItem {
                    label: "Dashboard".into(),
                    href: "/dashboard".into(),
                    icon: None,
                    badge: None,
                },
                sidebar::NavItem {
                    label: "Inbox".into(),
                    href: "/inbox".into(),
                    icon: None,
                    badge: Some("12".into()),
                },
            ],
        },
    ],
    user: Some(sidebar::UserBlock {
        name: "Sofia Davis".into(),
        email: "sofia@acme.com".into(),
        avatar_initials: "SD".into(),
        menu_href: "/settings".into(),
    }),
    topbar_title: Some("Overview".into()),
    topbar_actions: html! {
        // any Markup — e.g. your primary action button or search
    },
    children: html! {
        // your route content here
    },
    ..Default::default()
})
← Back to Blocks