IdentityBar

Product, search, notifications and account

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: '[email protected]',
  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}
/>

Usage examples

Context and actions, without a link

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' }}
/>

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

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.

AppShell: Places the bar above the main region.
RookRail: The primary navigation beside it.
SearchInput: For the search slot.
SiteHeader and SiteFooter: The header for marketing pages.

Dependencies

Kind	Depends on
npm packages	`react`
Monarch components	Avatar, DropdownMenu

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