DashboardLayout

The DashboardLayout component provides a production-ready admin panel layout with responsive sidebar, top navigation, and content area. Perfect for building admin dashboards, control panels, and internal tools.

Goal

Quickly build professional admin interfaces with a responsive sidebar, navigation, and content structure.

---

Quick Start

from faststrap import DashboardLayout, ListGroupItem

DashboardLayout(
    # Main content
    H1("Dashboard"),
    Card("Your content here"),

    # Configuration
    title="My Admin",
    sidebar_items=[
        ListGroupItem("Dashboard", href="/", active=True),
        ListGroupItem("Users", href="/users"),
        ListGroupItem("Settings", href="/settings")
    ]
)

---

Features

• Responsive sidebar - Collapses on mobile
• Top navigation bar - With user menu support
• Breadcrumbs support - Show navigation path
• Footer support - Optional footer content
• Theme support - Light or dark mode
• Customizable width - Adjust sidebar width

---

Complete Example

from faststrap import DashboardLayout, ListGroupItem, Dropdown, DropdownItem, StatCard, Row, Col

@app.get("/")
def dashboard():
    return DashboardLayout(
        # Main content
        Row(
            Col(StatCard("Users", "1,234", variant="primary"), md=3),
            Col(StatCard("Revenue", "$12,345", variant="success"), md=3),
            Col(StatCard("Orders", "567", variant="info"), md=3),
            Col(StatCard("Visitors", "8,901", variant="warning"), md=3)
        ),
        Card(
            Table(...),  # Your data table
            header="Recent Orders"
        ),

        # Sidebar navigation
        sidebar_items=[
            ListGroupItem(Icon("house"), " Dashboard", href="/", active=True),
            ListGroupItem(Icon("people"), " Users", href="/users"),
            ListGroupItem(Icon("box"), " Products", href="/products"),
            ListGroupItem(Icon("graph-up"), " Analytics", href="/analytics"),
            ListGroupItem(Icon("gear"), " Settings", href="/settings")
        ],

        # User menu
        user=Dropdown(
            DropdownItem("Profile", href="/profile"),
            DropdownItem("Settings", href="/settings"),
            "---",
            DropdownItem("Logout", href="/logout"),
            label="Admin User",
            variant="link"
        ),

        # Page title
        title="Admin Panel",

        # Footer
        footer="© 2026 My Company. All rights reserved."
    )

---

Parameter Reference

Parameter	Type	Default	Description
*content	Any	Required	Main content area components
title	str	"Dashboard"	Page title
sidebar_items	list[Any] \| None	None	Sidebar navigation items
user	Any \| None	None	User dropdown/profile component
breadcrumbs	list[tuple] \| None	None	Breadcrumb navigation
footer	str \| Any \| None	None	Footer content
sidebar_width	str	"250px"	Sidebar width on desktop
theme	str	"light"	Layout theme (light/dark)
**kwargs	Any	-	Additional HTML attributes

faststrap.layouts.dashboard.DashboardLayout(*content, title='Dashboard', sidebar_items=None, user=None, breadcrumbs=None, footer=None, sidebar_width='250px', theme='light', **kwargs)

Production-ready admin panel layout with responsive sidebar.

Parameters:

Name	Type	Description	Default
*content	Any	Main content area components	()
title	str	Page title (shown in top navbar or title bar)	'Dashboard'
sidebar_items	list[Any] | None	List of navigation items for the sidebar	None
user	Any | None	User dropdown or profile component	None
breadcrumbs	list[tuple[str, str | None]] | None	List of (label, url) tuples for navigation	None
footer	str | Any | None	Footer content	None
sidebar_width	str	Width of the sidebar on desktop	'250px'
theme	str	Layout theme (light or dark)	'light'
**kwargs	Any	Additional attributes	{}

Source code in src/faststrap/layouts/dashboard.py

@beta
def DashboardLayout(
    *content: Any,
    title: str = "Dashboard",
    sidebar_items: list[Any] | None = None,
    user: Any | None = None,
    breadcrumbs: list[tuple[str, str | None]] | None = None,
    footer: str | Any | None = None,
    sidebar_width: str = "250px",
    theme: str = "light",
    **kwargs: Any,
) -> Div:
    """Production-ready admin panel layout with responsive sidebar.

    Args:
        *content: Main content area components
        title: Page title (shown in top navbar or title bar)
        sidebar_items: List of navigation items for the sidebar
        user: User dropdown or profile component
        breadcrumbs: List of (label, url) tuples for navigation
        footer: Footer content
        sidebar_width: Width of the sidebar on desktop
        theme: Layout theme (light or dark)
        **kwargs: Additional attributes
    """
    sidebar_id = "sidebar-wrapper"

    # 1. Sidebar Component
    sidebar = Div(
        Div(
            A(
                Span(title, cls="fs-4 fw-bold"),
                href="/",
                cls="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-decoration-none text-reset",
            ),
            Div(cls="hr mb-3"),
            Nav(*(sidebar_items or []), cls="nav nav-pills flex-column mb-auto"),
            cls="sidebar-sticky p-3",
        ),
        id=sidebar_id,
        cls=f"bg-{theme} border-end sidebar",
        style=f"width: {sidebar_width};",
    )

    # 2. Top Navbar
    top_nav = Nav(
        Div(
            Button(
                Span(cls="navbar-toggler-icon"),
                cls="btn p-0 border-0 me-3 d-lg-none",
                type="button",
                data_bs_toggle="collapse",
                data_bs_target=f"#{sidebar_id}",
            ),
            Div(
                # Breadcrumbs could go here
                cls="d-flex align-items-center"
            ),
            Div(user or "", cls="ms-auto"),
            cls="container-fluid",
        ),
        cls=f"navbar navbar-expand-lg navbar-{theme} bg-{theme} sticky-top border-bottom py-2",
    )

    # 3. Main Content
    main_content = Div(
        top_nav,
        Container(Div(*content, cls="py-4"), fluid=True),
        (
            Footer(
                Container(Div(footer, cls="text-muted small py-3") if footer else "", fluid=True),
                cls=f"mt-auto border-top bg-{theme}",
            )
            if footer
            else ""
        ),
        cls="main-content-wrapper d-flex flex-column flex-grow-1",
    )

    return Div(sidebar, main_content, cls="d-flex dashboard-layout", style="min-height: 100vh;")