⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Bottom Navigation

Bottom Navigation

The bottom navigation bar displays two to five destinations, each with an icon and text. Tapping an icon takes the user to its corresponding top-level destination.

Usage

  • Crucial for easy access to main sections within an app, ensuring users can switch between key destinations effortlessly where one destination is always.
  • Provide access to two to five destinations, used for mobile and tablet only.

Anatomy

The button navigation structure comprises buttons, both active and inactive, housed within a container for organized presentation and user interaction.

Variant

Bottom Navigation has two variants without floating action button and with floating button.

Without Floating Button

HomeProfileSettingsShare

With Floating Button

HomeProfileSettingsShare

Options

Bottom navigation have different options.

Without Floating Button

HomeProfileSettingsShare

With Floating Button

HomeProfileSettingsShare

Specifications

Structure and spacing measurements for bottom navigation.

Live Demo

The Bottom Navigation is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Breadcrumb
Carousel

Helix - HDFC Life 2025