bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Sidebar

Application sidebar with logo, navigation menu, footer items, and user avatar dropdown. Provides primary navigation for your application.

When to use

Use sidebar navigation for applications with multiple primary sections or features.

Multi-Section Apps

Applications with distinct sections like dashboard, analytics, settings.

Persistent Navigation

When users need quick access to main navigation across all pages.

User Context

Display user profile and account-related actions in a consistent location.

When not to use

  • For simple applications with only 2-3 main sections—consider using a top navigation bar instead
  • On marketing or content websites where horizontal navigation is more appropriate
  • When screen real estate is extremely limited and a collapsible menu would be more suitable
  • For secondary or contextual navigation that changes frequently—use breadcrumbs or tabs instead

Anatomy

The sidebar consists of several key areas that work together.

  1. Logo Area

    Displays the application or brand logo at the top of the sidebar

  2. Search Button

    Quick access to global search functionality

  3. Navigation Menu

    Main menu items with icons and labels for primary navigation

  4. Footer Items

    Secondary navigation items like Help and Settings

  5. User Avatar Dropdown

    User profile with name, email, and account actions

Logo Variants

Sidebar supports multiple brand logos for different applications.

Actabl Logo

Alice Logo

Hotel Effectiveness

Configuration Examples

Sidebar adapts to different menu sizes and user configurations.

Few Menu Items

Sidebar with a minimal set of navigation items

Many Menu Items

Sidebar with extended navigation options

With Avatar Image

Sidebar displaying user avatar image

Best Practices

Follow these guidelines when implementing sidebar navigation.

Do

  • Limit primary navigation to 5-9 items
  • Use clear, recognizable icons for menu items
  • Keep labels short and descriptive
  • Highlight the active navigation item
  • Place less frequently used items in footer section
  • Maintain consistent ordering of menu items

Don't

  • Don't overcrowd the sidebar with too many items
  • Don't use vague or unclear labels
  • Don't hide critical navigation in submenus
  • Don't change menu order based on user actions
  • Don't use sidebar for secondary content

Accessibility

Sidebar is designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move through navigation items
  • Enter/Space - Activate navigation item
  • Escape - Close avatar dropdown if open
  • All interactive elements are keyboard accessible

Screen Reader

  • Navigation role is properly announced
  • Menu items are labeled clearly
  • Active item state is communicated
  • User information is accessible
  • Icon meanings are conveyed through labels

Visual Design

  • Clear focus indicators for keyboard navigation
  • Sufficient color contrast for all elements
  • Active state is visually distinct
  • Icons are supplemented with text labels

Resources

Design and development resources for the Sidebar component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →