Nav Bar

A Nav Bar is a navigation component that allows users to move between different primary areas of an app.

It typically appears at the bottom of the screen and persists across views, providing quick access to core features.

Common Alternative Names:
Bottom Navigation, Tab Bar, Navigation Tabs

---

Variants

With Label

Basic navigation bar with icons and labels.

Preview

Code

NavBar(
  onTabChanged: (index) {},
  items: const [
    BottomNavItem(
      icon: Icon(Icons.home_filled),
      label: 'Home',
    ),
    BottomNavItem(
      icon: Icon(Icons.person),
      label: 'Account',
    ),
  ],
)

---

No Label

Navigation bar with icons only.

Preview

Code

NavBar(
  onTabChanged: (index) {},
  items: const [
    BottomNavItem(
      icon: Icon(Icons.home_filled),
      label: 'Home',
    ),
    BottomNavItem(
      icon: Icon(Icons.person),
      label: 'Account',
    ),
  ],
)

---

With Badge

Navigation bar with notification badge.

Preview

Code

NavBar(
  onTabChanged: (index) => debugPrint('$index'),
  items: const [
    BottomNavItem(
      icon: Icon(Icons.home_filled),
      label: 'Home',
    ),
    BottomNavItem(
      icon: Badges(
        label: '1',
        child: Icon(Icons.person),
      ),
      label: 'Account',
    ),
  ],
)

---

With Dot Badge

Navigation bar with dot notification badge.

Preview

Code

NavBar(
  onTabChanged: (index) => debugPrint('$index'),
  items: const [
    BottomNavItem(
      icon: Icon(Icons.home_filled),
      label: 'Home',
    ),
    BottomNavItem(
      icon: Badges(
        size: BadgeSize.small,
        child: Icon(Icons.person),
      ),
      label: 'Account',
    ),
  ],
),

---

Five Tabs

Navigation bar with maximum number of tabs.

Preview

Code

NavBar(
  onTabChanged: (index) {},
  items: const [
    BottomNavItem(
      icon: Icon(Icons.home_filled),
      label: 'Home',
    ),
    BottomNavItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavItem(
      icon: Icon(Icons.add_circle_outlined),
      label: 'Create',
    ),
    BottomNavItem(
      icon: Icon(Icons.favorite_border),
      label: 'Saved',
    ),
    BottomNavItem(
      icon: Icon(Icons.person),
      label: 'Account',
    ),
  ],
)

---

Properties

Property	Type	Description
items	List<BottomNavItem>	List of navigation items to display.
onTabChanged	ValueChanged<int>	Callback triggered when a tab is selected.
selectedLabelStyle	TextStyle?	Text style for the selected tab’s label.
unselectedLabelStyle	TextStyle?	Text style for unselected tabs’ labels.
selectedItemColor	Color?	Color for the selected tab’s icon and label.
unselectedItemColor	Color?	Color for unselected tabs’ icons and labels.
backgroundColor	Color?	Background color of the navigation bar.