⌘ 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
App Bar

App Bar

App bar provide branding, navigation, profile, and access to global application actions such as primary & secondary actions.

Usage

  • Displays the app's logo and name prominently.
  • Offers clear navigation options using icons or text for different sections.
  • Provides convenient access to essential actions through buttons or menus.

Anatomy

The app bar encompasses various functional elements, such as a navigation icon, a logo or page title, a status bar, action buttons, and an optional summary row.

Variant

Variants of the app bar component include home page and inner pager.

Home Page

Logo Alt

Inner Page

Page Title

States

App bar have various options in home page and inner page.

Home Page

Logo Alt

Inner Page

Page Title

Specifications

Structure and spacing measurements for app bar.

Live Demo

The App Bar is demonstrated in a live environment in this demo.

Storybook

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

Accordion
Avatar

Helix - HDFC Life 2025