Masthead

A top level section displayed at the top of the page

Overview

The Masthead is a simple section at the top of the page that allows the developer to communicate the service logo, user profile, notifications, and offer a search bar.

HomeShipsReportsAppTS

Usage

The Masthead component is a main navigational component that resides at the top of an application. It is fixed in place and has a higher stacking order than the rest of the page, so content will flow underneath it on scroll. There should only be one Masthead component per page.

Anatomy

HomeShipsReportsAppTS51234The Masthead Anatomy.
  1. Container. The Masthead Container wraps the entire Masthead and ensures it stays pinned to the top of the viewport.
  2. Search. This button triggers the appearance of the Search Bar. When clicked, the page links in the Header.
  3. Notifications. This icon displays to the user when they have an unread notification. Clicking on the icon will display the Notification Sheet.
  4. Profile. This button links to the User's profile, including settings.
  5. App Nav. Works similarly to the Tabset, allowing the user to quickly navigate between multiple application pages.

States

Aside from the active page links (an example of these states is shown in the Tabset Docs), the Masthead component only has two states. When the Search button is clicked in the top row of the Masthead, the page links are replaced with a full width search bar. Clicking on the Search button again will hide the bar.

HomeShipsReportsAppTSSearch...AppTSThe Masthead States.

Basic

<Masthead
  homeLink={<Link href="/" />}
  title="Test"
/>

Masthead with custom logo

<Masthead
  homeLink={<Link href="/" />}
  title="Test"
  Logo={CustomLogo}
/>

Masthead with search

<Masthead
  homeLink={<Link href="/" />}
  onSearch={() => { /* handle search */ }}
  searchPlaceholder="Search"
  title="test"
/>

Fully loaded

<Masthead
  homeLink={<Link href="/" />}
  nav={(
    <MastheadNav>
      <MastheadNavItem link={<Link href="/home">Get started</Link>} isActive />
      <MastheadNavItem link={<Link href="/styles">Styles</Link>} />
      <MastheadNavItem link={<Link href="/components">Components</Link>} />
      <MastheadNavItem link={<Link href="/about">About</Link>} />
    </MastheadNav>
  )}
  notifications={notifications}
  onSearch={() => { /* handle search */ }}
  searchPlaceholder="Search"
  title="Test"
  hasUnreadNotification
  user={
    <MastheadUser initials="AT" link={<Link href="/user-profile" />} />
  }
/>

Properties

MastHead
NameTypeRequiredDefaultDescription
hasUnreadNotificationbooleanFalseFalseIf there are unread notifications then this will cause a small blue indicator to be displayed to alert the user.
homeLinkReact.ReactElement<LinkTypes>FalseA `Link` which will contain the `href` for sending the user back to home.
LogoReact. ComponentTypeFalseA 21x19 logo or if none is provided a default is used.
navReact.ReactElement<ScrollableNavProps>FalseNavigation for the MastHead.
notificationsReact.ReactElement<NotificationsProps>FalseThis property contains the content for the Notifications Popover. These are recent notifications, including read status, and a link to read them.
onSearch(term: string) => voidFalseIf a search function is provided the searchbox is shown and the function called on submission.
searchPlaceholderStringFalseProvide a placeholder attribute for the search text input if desired.
titleStringTrueA service name that will be displayed next to the logo
userReact.ReactElement<MastheadUserProps>FalseIf your application has a User Profile page, specify a `MastheadUser` to add their initials to the Avatar sub-component. This Avatar provides a link to the User’s profile.

MastheadNav
NameTypeRequiredDefaultDescription
childrenReact.ReactElement<ScrollableNavItemProps>[]Truen/aEach child represents a nav item.

MastheadNavItem
NameTypeRequiredDefaultDescription
isActivebooleanFalseFalseIs this the current active item?
linkReact.ReactElement<LinkTypes>Truen/aThe `Link` to be rendered.

MastheadUser
NameTypeRequiredDefaultDescription
initialsstringTruen/aInitials of the user.
linkReact.ReactElement<LinkTypes>Truen/aA url to send the user to, if they wish to see their profile.