bellhop by actabl

When to use

Use property switcher when users need to change context between different properties, portfolios, or regions.

Multi-Property Management

Switch between hotels, resorts, or properties under management.

Portfolio Navigation

Navigate between portfolio-level and individual property views.

Regional Views

Filter and view properties organized by geographic regions.

When not to use

  • For product switching—use product-switcher instead
  • When there's only one property—component is unnecessary
  • For user account switching—use account switcher
  • In contexts where property context is always clear

Features

Property switcher includes powerful features for organization.

Hierarchical Types

Support for portfolio, region, and property levels

Search Functionality

Filter properties by name with instant results

Grouping

Organize properties into collapsible regional groups

Selection Indicator

Checkmark shows currently selected property

Scalable Lists

Handles small to large property portfolios

Variants

Different configurations for various organizational structures.

Simple List

Flat list of properties without grouping

Grouped by Region

Properties organized into collapsible regional groups

Large Property List

Search-enabled for large portfolios (25+ properties)

Property Types

Supports different hierarchical levels in the organization.

Portfolio

Top-level view across all properties in the organization

Region

Geographic grouping of multiple properties

Property

Individual hotel, resort, or managed property

Best Practices

Follow these guidelines when using property switcher.

Do

  • Enable grouping for 10+ properties across multiple regions
  • Use search for portfolios with 15+ properties
  • Show portfolio and region options when applicable
  • Indicate current selection clearly
  • Place in consistent location (header or sidebar)
  • Update page context immediately on selection

Don't

  • Don't use for single-property applications
  • Don't hide search when list is long
  • Don't group small property lists (< 6 items)
  • Don't change switcher location between pages
  • Don't nest groups more than one level deep

Common Use Cases

Examples of where property switcher is essential.

Hotel Management Systems

Switch between properties to view operations data

Revenue Management

Analyze metrics for different properties or regions

Housekeeping Apps

Manage tasks across multiple hotel locations

Analytics Dashboards

Compare performance across property portfolio

Booking Systems

Select property for reservations and inventory

Configuration Management

Apply settings to specific properties or regions

Accessibility

Property switcher is designed to be accessible to all users.

Keyboard Navigation

  • Tab - Focus on switcher button
  • Enter/Space - Open dropdown menu
  • Type - Filter properties via search
  • Arrow Up/Down - Navigate property list
  • Enter - Select property
  • Escape - Close dropdown

Screen Reader

  • Combobox role with search capability
  • Current selected property announced
  • Property type (portfolio/region/property) communicated
  • Group structure is announced
  • Expanded/collapsed group states indicated
  • Search results count announced

Visual Design

  • Clear focus indicator for button and options
  • Selected property has checkmark
  • Sufficient contrast for all text
  • Group headers visually distinct from items
  • Hover states provide feedback

Resources

Design and development resources for the Property Switcher component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →