App Bar - Bellhop Design System

When to use

Use the app bar as the primary navigation header in your application to provide consistent branding, navigation, and quick access to key actions.

Application Header

Position at the top of your application to provide persistent branding and navigation across all pages.

Navigation Context

Show users where they are in the application with breadcrumb navigation and highlight their current location.

Quick Actions

Provide easy access to notifications, calendar, and settings through icon buttons in the header.

Menu Control

Include a menu toggle button to show/hide the main navigation sidebar for responsive layouts.

When not to use

On marketing or landing pages where a full-width hero section is more appropriate
In mobile-first applications where a bottom navigation bar provides better ergonomics
For public-facing websites that need SEO-optimized navigation—use semantic HTML nav instead
When the application doesn't need persistent global actions or breadcrumb navigation

Anatomy

The app bar consists of a left section with navigation controls and a right section with action buttons.

Menu Toggle Button
Icon button to open/close the navigation sidebar
Logo
Application branding image with configurable source and alt text
Property Switcher Slot
Optional slot for custom property or workspace switcher component
Breadcrumb Navigation
Shows the current navigation path with clickable parent items
Calendar Button
Icon button with optional badge indicator for calendar access
Settings Button
Icon button with optional badge indicator for settings access
Notifications Button
Icon button with optional badge showing notification count

Variants

The app bar supports different configurations for various application states.

Default

Standard app bar with logo, breadcrumbs, and action buttons with notification count.

Menu Open

App bar with menu toggle in open state, showing menu_open icon.

No Notifications

App bar without notification badges when there are no pending notifications.

Without Logo

App bar configuration without a logo, useful for nested views or specific contexts.

Events

The app bar emits custom events when users interact with its buttons and navigation elements.

bhMenuToggle

Emitted when the menu toggle button is clicked to open or close the sidebar.

bhBreadcrumbClick

Emitted when a breadcrumb item is clicked, providing the clicked item's details.

bhNotificationClick

Emitted when the notifications icon button is clicked.

bhCalendarClick

Emitted when the calendar icon button is clicked.

bhSettingsClick

Emitted when the settings icon button is clicked.

Best Practices

Follow these guidelines when implementing the app bar in your application.

Do

Keep the app bar visible and fixed at the top of the viewport
Use clear, concise breadcrumb labels that reflect the navigation hierarchy
Update notification counts in real-time when new notifications arrive
Provide meaningful alt text for the logo image
Handle all event emitters to provide responsive interactions

Don't

Don't hide the app bar when scrolling unless absolutely necessary
Don't use extremely long breadcrumb paths that cause horizontal overflow
Don't place too many custom elements in the property switcher slot
Don't forget to update the isMenuOpen state when toggling the sidebar
Don't use the app bar for secondary or contextual navigation

Accessibility

The app bar is built with accessibility in mind, providing keyboard navigation and screen reader support.

Keyboard Support

Tab: Navigate between interactive elements in the app bar
Enter/Space: Activate focused buttons and breadcrumb links
Escape: Close any open menus or dropdowns triggered from the app bar

ARIA Attributes

role="banner": Identifies the app bar as a landmark banner region
aria-label: Provides accessible names for icon buttons
aria-current: Indicates the current page in breadcrumb navigation
aria-live: Announces notification count changes to screen readers

Screen Reader Support

Logo image has descriptive alt text
Icon buttons announce their purpose and state
Notification counts are announced when they change
Breadcrumb navigation clearly identifies the current location

Focus Management

Clear focus indicators on all interactive elements
Logical tab order from left to right
Focus remains visible when navigating with keyboard
Skip link functionality to bypass repetitive navigation

Related Components

Components that work together with the App Bar for complete application navigation.

Sidebar

Main navigation menu that works in tandem with the app bar, toggled by the menu button.

Breadcrumbs

Navigation component displayed within the app bar to show the current page hierarchy.

Dropdown

Used for notification, calendar, and settings menus triggered from the app bar action buttons.

Badge

Displays notification counts on the app bar's notification icon button.

Resources

Design and development resources for the App Bar component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →