Skip to main content

​
About Topbar

Topbar is a sticky horizontal navigation component that sits at the top of your application. It provides a consistent location for branding, navigation controls, and user actions.

​
Components

  • Topbar - Main container for top navigation
  • TopbarActions - Container for action buttons and controls

​
Installation

yarn add @twilio-paste/topbar

​
Usage

import { Topbar, TopbarActions } from '@twilio-paste/topbar';
import { Button } from '@twilio-paste/button';

const MyTopbar = () => (
  <Topbar id="main-topbar">
    <div>My Application</div>
    <TopbarActions>
      <Button variant="secondary">Settings</Button>
      <Button variant="primary">Sign Out</Button>
    </TopbarActions>
  </Topbar>
);

​
Props

​
Topbar

​
TopbarActions

​
Composition

Topbar uses a flexbox layout with space-between justification, placing content on the left and actions on the right. 
<Topbar id="topbar">
  {/* Left side content */}
  <ProductSwitcher />
  
  {/* Right side actions */}
  <TopbarActions>
    <AccountSwitcher />
    <UserDialog />
  </TopbarActions>
</Topbar>

​
Sticky Positioning

Topbar uses position: sticky and top: 0 to remain visible when scrolling. It has a high z-index (40) to stay above page content.

​
Accessibility

  • Topbar requires a unique id for skip link navigation
  • Use semantic grouping for related actions
  • Ensure interactive elements have accessible labels
  • Topbar has proper color contrast for readability

​
Layout Integration

Topbar works with other application components: 
<>
  <Topbar id="main-topbar">
    {/* topbar content */}
  </Topbar>
  <Sidebar topbarSkipLinkID="main-topbar">
    {/* sidebar content */}
  </Sidebar>
  <main id="main-content">
    {/* page content */}
  </main>
</>

​
Related components

Build docs developers (and LLMs) love

Get started for freeTalk to us