Source: https://monarchui.dev/components/identity-bar/

Patterns · Navigation

# IdentityBar

The top bar of a Rook app: product name, search, notifications and the account menu.

@rookcom/monarch-react/shell

Pattern

## Product, search, notifications and account

## Usage examples

### Context and actions, without a link

## Purpose

Shows which product you are in and who you are signed in as, with room for search and notifications.

### Use when

- The top of a signed-in app page, inside AppShell next to RookRail, or alone in an app without a rail.

### Avoid when

- Marketing pages with product menus: use the marketing site shell (`SiteHeader`) from `@rookcom/monarch-react/marketing`.
- A page title with actions: use PageHeader inside the main region.

## Design principles

- The product name is always visible text, never only a logo.
- Slots, not settings: search, start, actions and notifications are whatever the app passes.
- The account menu is the same as the rail’s, so Profile, Rook account and Sign out are in the same order everywhere.

## API reference

```tsx
import { IdentityBar } from '@rookcom/monarch-react/shell';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `IdentityBar` | component | client | `.mn-identity-bar` |

Forwards its ref to the `<header>`.

`account` has the same shape as RookRail’s.

Generated from the TypeScript declarations of `packages/react/src/patterns/navigation/identity-bar`.

## Properties

`product`: `{ name, href?, logo? }`. Without `href` the name is plain text.

`sticky` (default true) keeps the bar at the top of its scrolling area.

### `IdentityBar`

The top identity bar of a Rook app: the product name, an optional start slot (breadcrumb, Space), a search slot, trailing actions, notifications and the account menu. It is the page banner (`<header>`); pair it with RookRail inside AppShell, or use it alone in apps without a rail.

| Prop | Type | Description |
| --- | --- | --- |
| `product` required | `IdentityBarProduct` |  |
| `account` | `ShellAccount` | The signed-in person: avatar button and account menu. |
| `actions` | `ReactNode` | Other trailing actions (help, theme toggle), before notifications. |
| `className` | `string` |  |
| `id` | `string` |  |
| `linkComponent` | `ShellLinkComponent` | Link element for client navigation. Default `<a>`. |
| `messages` | `Partial<AccountMenuMessages>` | Interface text, for translation. |
| `notifications` | `ReactNode` | Notifications button or popover trigger. |
| `search` | `ReactNode` | Search field or command-palette button. Takes the free space; wraps below on narrow screens. |
| `start` | `ReactNode` | After the product name: a breadcrumb, a page title or a Space switcher. |
| `sticky` | `boolean` | Stick to the top of the scrolling area. Default true. |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `sticky` | `'true'``'false'` | Sticks to the top of the scroll container (`data-sticky`). |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Sticky | `data-sticky` | Default. |
| Account menu open | `aria-expanded="true"` | On the avatar button. |

## Interaction behaviour

- The product name links home through `linkComponent` when `href` is set.
- The avatar button opens the account menu: the person, Profile, extra entries, Rook account (new tab) and Sign out.

## Keyboard support

| Keys | Action |
| --- | --- |
| Tab | Product link, slots in order, then the account button. |
| Enter / Space / ↓ | Open the account menu with focus on its first item. |
| ↓ / ↑ | Move through the menu. |
| Escape | Close the menu and return focus to the avatar button. |

## Accessibility

Role

banner

landmark (

<header>

outside main)

Accessible name

The product link is named by the product name; the avatar button is "Account: <name>".

- The logo is decorative; the name is text.
- The account menu is a Monarch DropdownMenu (APG menu button), with the person’s name and email as its label.
- New-tab links say so to screen readers.

## Responsive behaviour

- The product name truncates; below 640px the search slot moves to its own full-width row.
- The avatar button is 44px on touch screens.

## Theme support

- Surface, border and text tokens; works in every theme and more-contrast mode.

## Do and don't

### Do

- Use one IdentityBar per page, at the top of AppShell.
- Name search fields and icon buttons you pass into the slots.

### Don't

- Do not put primary navigation here; that is the rail’s job.
- Do not repeat the account menu in the bar when the rail already shows it, unless the app has no rail.

## Related components

- [AppShell](https://monarchui.dev/components/app-shell/): Places the bar above the main region.
- [RookRail](https://monarchui.dev/components/rook-rail/): The primary navigation beside it.
- [SearchInput](https://monarchui.dev/components/search-input/): For the search slot.
- [SiteHeader and SiteFooter](https://monarchui.dev/components/marketing-site-shell/): The header for marketing pages.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `react` |
| Monarch components | [Avatar](https://monarchui.dev/components/avatar/), [DropdownMenu](https://monarchui.dev/components/dropdown-menu/) |

## Testing coverage

- Banner landmark with the product link, search and notifications slots.
- Plain product name without `href`; start and actions slots.
- Account menu from the keyboard with the person, Profile and Sign out; Escape returns focus.
- Link component, translated messages, sticky off, server render.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery/identity-bar; Cross-browser axe: /components/identity-bar |

Tests: `packages/react/src/patterns/navigation/identity-bar`

## All example code

### Product, search, notifications and account

```tsx
import { IdentityBar } from '@rookcom/monarch-react/shell';
import { IconButton, SearchInput } from '@rookcom/monarch-react';

// AppMark, BellIcon: demo icons from the docs site; use your own.

const account = {
  name: 'Grace Hopper',
  email: 'grace@example.com',
  profileHref: '#profile',
  accountHref: 'https://id.example.com',
  onSignOut: () => {},
};

<IdentityBar
  style={{ width: '100%' }}
  sticky={false}
  product={{ name: 'Acme Desk', href: '#home', logo: <AppMark /> }}
  search={<SearchInput aria-label="Search tickets" placeholder="Search tickets" />}
  notifications={<IconButton label="Notifications" icon={<BellIcon />} />}
  account={account}
/>
```

### Context and actions, without a link

```tsx
import { IdentityBar, ThemeToggle } from '@rookcom/monarch-react/shell';

<IdentityBar
  style={{ width: '100%' }}
  sticky={false}
  product={{ name: 'Acme Desk' }}
  start={<span>Support queue</span>}
  actions={
    <ThemeToggle
      variant="menu"
      size="sm"
      showLabel={false}
      cookies={null}
      applyToDocument={false}
    />
  }
  account={{ name: 'Grace Hopper' }}
/>
```