TopBar | Dashforge Docs

Browse docs

Fixed application header that houses the sidebar toggle button, logo/title area, and arbitrary right-side content (user menus, notifications, theme toggles). Used internally by AppShell but can be composed independently.

Usage

tsx

import { TopBar } from '@dashforge/ui';
import { useState } from 'react';

export function Layout({ children }: { children: React.ReactNode }) {
  const [navOpen, setNavOpen] = useState(true);

  return (
    <>
      <TopBar
        navOpen={navOpen}
        onNavToggle={() => setNavOpen((prev) => !prev)}
        navWidthExpanded={240}
        navWidthCollapsed={64}
        title="My App"
      >
        {/* Right-side content */}
        <UserAvatarMenu />
        <ThemeToggle />
      </TopBar>

      {/* sidebar + main content */}
      {children}
    </>
  );
}

API

Prop	Type	Default	Description
`navOpen`	`boolean`	—	Current sidebar open state. Required.
`onNavToggle`	`() => void`	—	Called when the hamburger icon is clicked. Required.
`navWidthExpanded`	`number`	`240`	Sidebar width when expanded — used to shift the top bar.
`navWidthCollapsed`	`number`	`64`	Sidebar width when collapsed — used to shift the top bar.
`title`	`string`	—	App title shown in the top bar.
`logo`	`ReactNode`	—	Logo node to display instead of or alongside `title`.
`children`	`ReactNode`	—	Content rendered on the right side of the top bar.
`elevation`	`number`	`0`	MUI Paper elevation for the app bar shadow.

Notes

TopBar is already included when using AppShell. Only compose it independently if you are building a custom layout without AppShell.
The top bar shifts its left position to account for the sidebar width, matching the expanded/collapsed state via navOpen.

Capabilities

TopBar provides intelligent layout coordination with LeftNav, responsive mobile adaptation, and flexible content slots for building professional application headers.

LeftNav Coordination

Layout

Automatically shifts position and width based on LeftNav state. Smooth transitions when navigation toggles or collapses.

Dynamic width adjustment
Smooth transition animations
Syncs with nav state

tsx

<TopBar
  navOpen={navOpen}
  navWidthExpanded={280}
  navWidthCollapsed={64}
  left={<Logo />}
  right={<UserMenu />}
/>

Responsive Behavior

Mobile Ready

Automatically adapts to mobile viewports. Full-width on mobile, coordinated layout on desktop with configurable breakpoint.

Full-width on mobile
Configurable breakpoint threshold
Automatic viewport detection

tsx

<TopBar
  navOpen={navOpen}
  navWidthExpanded={280}
  navWidthCollapsed={64}
  breakpoint="lg"
  left={<MenuToggle />}
  right={<Avatar />}
/>

Flexible Content Slots

Composition

Three content slots (left, center, right) for flexible layouts. Compose branding, search, navigation, and user actions as needed.

Left, center, right slots
Accepts any React node
Custom toolbar height

tsx

<TopBar
  navOpen={navOpen}
  navWidthExpanded={280}
  navWidthCollapsed={64}
  left={<Logo />}
  center={<SearchBar />}
  right={<UserActions />}
/>