Page

A composite page layout component for building structured pages with header, body, and optional sidebar sections.

Basic Usage

The DPage component provides a structured layout with a header containing title and description, plus a body area for your main content.
dart
1
2
3
4
5
6
7
8
9
DPage(
  header: DPageHeader(
    title: 'Page Title',
    description: 'A brief description of this page.',
  ),
  body: [
    p([Component.text('Page content goes here.')]),
  ],
)

With Breadcrumbs

Add navigation breadcrumbs to help users understand their location in the app hierarchy. Each breadcrumb item can have a label and optional href for navigation.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DPage(
  header: DPageHeader(
    title: 'Settings',
    breadcrumbs: [
      DBreadcrumbItem(label: 'Home', href: '/'),
      DBreadcrumbItem(label: 'Account', href: '/account'),
      DBreadcrumbItem(label: 'Settings'),
    ],
  ),
  body: [
    Component.text('Settings page content'),
  ],
)

With Actions

Add action buttons to the page header for common operations like export, create, or edit. Actions are displayed on the right side of the header.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DPage(
  header: DPageHeader(
    title: 'Users',
    description: 'Manage your team members.',
    actions: [
      DButton(label: 'Export', variant: DButtonVariant.outline),
      DButton(label: 'Add User', variant: DButtonVariant.primary),
    ],
  ),
  body: [
    Component.text('Users list content'),
  ],
)

With Sidebar

Add a page sidebar for in-page navigation, table of contents, or secondary navigation. The sidebar appears alongside the main content area.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
DPage(
  header: DPageHeader(
    title: 'Documentation',
  ),
  sidebar: DPageSidebar(
    items: [
      DPageSidebarItem(label: 'Getting Started', href: '#getting-started'),
      DPageSidebarItem(label: 'Installation', href: '#installation'),
      DPageSidebarItem(label: 'Configuration', href: '#configuration'),
      DPageSidebarItem(label: 'Examples', href: '#examples'),
    ],
  ),
  body: [
    Component.text('Documentation content'),
  ],
)

Full Width

Enable full-width mode to remove max-width constraints and allow content to span the entire available width. Useful for dashboards and data-heavy pages.
dart
1
2
3
4
5
6
7
8
9
DPage(
  fullWidth: true,
  header: DPageHeader(
    title: 'Analytics Dashboard',
  ),
  body: [
    Component.text('Full width content area'),
  ],
)

With Footer

Add a page footer for form actions, navigation controls, or status information. The footer stays at the bottom of the page content area.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DPage(
  header: DPageHeader(
    title: 'Profile',
  ),
  body: [
    Component.text('Profile form content'),
  ],
  footer: DPageFooter(
    children: [
      DButton(label: 'Cancel', variant: DButtonVariant.ghost),
      DButton(label: 'Save Changes', variant: DButtonVariant.primary),
    ],
  ),
)