Navigation Menu

Horizontal and vertical navigation menus with dropdown support.

Basic Horizontal Menu

dart
1
2
3
4
5
6
7
8
DNavigationMenu(
  items: [
    DNavigationItem(label: 'Home', href: '/'),
    DNavigationItem(label: 'Products', href: '/products'),
    DNavigationItem(label: 'About', href: '/about'),
    DNavigationItem(label: 'Contact', href: '/contact'),
  ],
)

Vertical Menu

dart
1
2
3
4
5
6
7
8
9
DNavigationMenu(
  orientation: DNavigationOrientation.vertical,
  items: [
    DNavigationItem(label: 'Dashboard', href: '/dashboard'),
    DNavigationItem(label: 'Projects', href: '/projects'),
    DNavigationItem(label: 'Team', href: '/team'),
    DNavigationItem(label: 'Settings', href: '/settings'),
  ],
)

With Icons

dart
1
2
3
4
5
6
7
8
9
10
11
12
DNavigationItem(
  label: 'Dashboard',
  href: '/dashboard',
  icon: DIcon(name: DIconNames.home, size: DIconSize.sm),
  active: true,
)

DNavigationItem(
  label: 'Settings',
  href: '/settings',
  icon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
)

With Badge

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DNavigationItem(
  label: 'Notifications',
  href: '/notifications',
  icon: DIcon(name: DIconNames.bell, size: DIconSize.sm),
  badge: DBadge(label: '5', size: DSize.xs),
)

DNavigationItem(
  label: 'Messages',
  href: '/messages',
  icon: DIcon(name: DIconNames.mail, size: DIconSize.sm),
  badge: DBadge(label: '12', size: DSize.xs, color: DBadgeColor.primary),
)

States

dart
1
2
3
DNavigationItem(label: 'Active', href: '#', active: true)
DNavigationItem(label: 'Normal', href: '#')
DNavigationItem(label: 'Disabled', href: '#', disabled: true)

Dropdown Menu

Items with children render as dropdown menus.

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DNavigationMenu(
  items: [
    DNavigationItem(label: 'Home', href: '/'),
    DNavigationItem(
      label: 'Products',
      children: [
        DNavigationItem(label: 'All Products', href: '/products'),
        DNavigationItem(label: 'Categories', href: '/categories'),
        DNavigationItem(label: 'New Arrivals', href: '/new'),
      ],
    ),
    DNavigationItem(label: 'Contact', href: '/contact'),
  ],
)

Vertical Navigation with Groups

Use DVerticalNavigation and DNavigationGroup for grouped sidebar navigation.

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
28
29
30
31
32
33
34
35
DVerticalNavigation(
  groups: [
    DNavigationGroup(
      title: 'Main',
      items: [
        DNavigationItem(
          label: 'Dashboard',
          href: '/dashboard',
          icon: DIcon(name: DIconNames.home, size: DIconSize.sm),
          active: true,
        ),
        DNavigationItem(
          label: 'Projects',
          href: '/projects',
          icon: DIcon(name: DIconNames.folder, size: DIconSize.sm),
        ),
      ],
    ),
    DNavigationGroup(
      title: 'Settings',
      items: [
        DNavigationItem(
          label: 'Account',
          href: '/account',
          icon: DIcon(name: DIconNames.user, size: DIconSize.sm),
        ),
        DNavigationItem(
          label: 'Preferences',
          href: '/preferences',
          icon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
        ),
      ],
    ),
  ],
)

API Reference

DNavigationMenu

Prop Type Default Description
items List<DNavigationItem> required Menu items
orientation DNavigationOrientation horizontal Menu orientation

DNavigationItem

Prop Type Default Description
label String required Item label
href String? null Link URL
icon Component? null Leading icon
badge Component? null Badge component
active bool false Active state
disabled bool false Disabled state
onClick VoidCallback? null Click handler
children List<DNavigationItem>? null Dropdown items

DVerticalNavigation

Prop Type Default Description
groups List<DNavigationGroup> required Navigation groups

DNavigationGroup

Prop Type Default Description
title String? null Group title
items List<DNavigationItem> required Group items

DNavigationOrientation

Value Description
horizontal Horizontal menu layout
vertical Vertical menu layout