Top Bar

TopBar holds the logo, the search field and the items on the right. TopBarPill groups related items in a translucent pill, and BrandMark is the round mark before the product name.

import { BrandMark, TopBar, TopBarPill } from '@beyul/sulmu-ui'

Source · Figma

Examples

Tourism Suite

Clock in

Online Users

+27

import {
  Avatar,
  AvatarGroup,
  BrandMark,
  IconButton,
  Input,
  NotificationIcon,
  SearchNormalIcon,
  Switch,
  TopBar,
  TopBarPill,
} from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <TopBar
      logo={
        <>
          <BrandMark /> Tourism Suite
        </>
      }
      search={
        <Input
          variant="translucent"
          aria-label="Search"
          placeholder="Search..."
          rightElement={<SearchNormalIcon />}
        />
      }
    >
      <TopBarPill>
        Clock in <Switch aria-label="Clock in" />
      </TopBarPill>
      <TopBarPill>
        Online Users
        <AvatarGroup max={3} total={30}>
          <Avatar size="sm" name="Jane Menefee" />
          <Avatar size="sm" name="Sandra Johnson" />
          <Avatar size="sm" name="Ruben Stanton" />
        </AvatarGroup>
      </TopBarPill>
      <IconButton aria-label="Notifications" icon={<NotificationIcon size="sm" />} />
      <Avatar name="Howard Sheldon" />
    </TopBar>
  )
}

Props

Prop	Type	Default	Description
`logo`	`ReactNode`	-	Usually `<BrandMark />` plus the product name, wrapped in a link to home.
`search`	`ReactNode`	-	The search field: `<Input variant="translucent" rightElement={<SearchNormalIcon />} />`.
`children`	`ReactNode`	-	Right side: TopBarPill elements, the notification button, the user avatar.

TopBar also accepts every header attribute. TopBarPill accepts every div attribute and BrandMark every span attribute; neither has props of its own.

Usage notes

TopBar is a <header>.
The search field is an <Input variant="translucent">.
BrandMark is decorative (aria-hidden); put the product name next to it as text.