Dashboard

A composite dashboard component for building admin interfaces with sidebar navigation, header, and content areas.

Basic Usage

The DDashboardGroup component creates a flexible layout container for dashboard interfaces. It contains DDashboardSidebar for navigation and DDashboardPanel for main content.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
DDashboardGroup(
  children: [
    DDashboardSidebar(
      children: [
        DSidebarItem(label: 'Home', icon: DIcon(name: 'home', size: 20)),
        DSidebarItem(label: 'Analytics', icon: DIcon(name: 'chart-bar', size: 20)),
        DSidebarItem(label: 'Users', icon: DIcon(name: 'users', size: 20)),
        DSidebarItem(label: 'Settings', icon: DIcon(name: 'cog', size: 20)),
      ],
    ),
    DDashboardPanel(
      children: [
        Component.text('Dashboard content goes here'),
      ],
    ),
  ],
)

With Navbar

Add a DDashboardNavbar at the top of your dashboard for branding and global actions. Use vertical orientation to stack the navbar above the sidebar/panel group.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
DDashboardGroup(
  orientation: DDashboardOrientation.vertical,
  children: [
    DDashboardNavbar(
      title: 'My Dashboard',
      trailing: DButton(label: 'New Item', variant: DButtonVariant.primary),
    ),
    DDashboardGroup(
      children: [
        DDashboardSidebar(
          children: [
            DSidebarItem(label: 'Home', icon: DIcon(name: 'home', size: 20)),
            DSidebarItem(label: 'Projects', icon: DIcon(name: 'folder', size: 20)),
          ],
        ),
        DDashboardPanel(
          children: [
            Component.text('Content area'),
          ],
        ),
      ],
    ),
  ],
)

With Sidebar Sections

Organize sidebar items into logical groups using DSidebarSection. Each section can have a label and contains multiple DSidebarItem components. Items can show badges and active states.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
DDashboardGroup(
  children: [
    DDashboardSidebar(
      children: [
        DSidebarSection(
          label: 'Main',
          children: [
            DSidebarItem(label: 'Dashboard', icon: DIcon(name: 'home', size: 20), active: true),
            DSidebarItem(label: 'Inbox', icon: DIcon(name: 'inbox', size: 20), badge: '5'),
          ],
        ),
        DSidebarSection(
          label: 'Management',
          children: [
            DSidebarItem(label: 'Team', icon: DIcon(name: 'users', size: 20)),
            DSidebarItem(label: 'Organization', icon: DIcon(name: 'building-office', size: 20)),
          ],
        ),
      ],
    ),
    DDashboardPanel(
      children: [
        Component.text('Grouped navigation content'),
      ],
    ),
  ],
)

Collapsible Sidebar

The sidebar can be collapsed to show only icons, saving screen space. Use initialCollapsed to set the default state. Users can toggle the sidebar visibility.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
DDashboardGroup(
  children: [
    DDashboardSidebar(
      initialCollapsed: false,
      children: [
        DSidebarItem(label: 'Home', icon: DIcon(name: 'home', size: 20)),
        DSidebarItem(label: 'Documents', icon: DIcon(name: 'document', size: 20)),
      ],
    ),
    DDashboardPanel(
      children: [
        Component.text('Collapsible sidebar content'),
      ],
    ),
  ],
)

With Footer

Add a footer section to the sidebar for user profile information, settings, or logout actions. The footer stays pinned to the bottom of the sidebar.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
DDashboardGroup(
  children: [
    DDashboardSidebar(
      children: [
        DSidebarItem(label: 'Home', icon: DIcon(name: 'home', size: 20)),
      ],
      footer: div(classes: 'p-4 border-t', [
        div(classes: 'flex items-center gap-3', [
          DAvatar(text: 'JD', size: DAvatarSize.sm),
          div([
            div(classes: 'text-sm font-medium', [Component.text('John Doe')]),
            div(classes: 'text-xs text-zinc-400', [Component.text('[email protected]')]),
          ]),
        ]),
      ]),
    ),
    DDashboardPanel(
      children: [
        Component.text('Dashboard with user menu'),
      ],
    ),
  ],
)