Skip Navigation
React Magma

Header

The Header pattern is a highly-opinionated, advanced component composed of smaller React Magma components. It includes options for a logo, a call to action, a search bar, and icon buttons. The Header pattern will handle the order and placement of these elements.

If you have a need for a header with more customization or different features in it, you can use the simpler AppBar component wrapper.

Setup Requirements

  1. Your project needs to be running React v16.8 or greater
  2. react-magma-icons and react-magma-dom must be installed as peer dependencies
  3. Header is part of a separate package. Install it using npm i @cengage-patterns/header --save

Basic Usage

import React from 'react';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return <Header logo={<strong>LOGO</strong>} />;
}

Compact

The isCompact prop will render a shorter header with less padding.

import React from 'react';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return <Header isCompact logo={<strong>LOGO</strong>} />;
}

Inverse

The isInverse prop will render an appbar with a dark background and light text. The components inside the header will inherit the isInverse prop unless specified otherwise.

import React from 'react';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return <Header isInverse logo={<strong>LOGO</strong>} />;
}

The searchProps prop takes an object of Search Props from the Search component.

import React from 'react';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return (
    <Header
      isCompact
      isInverse
      logo={<strong>LOGO</strong>}
      searchProps={{
        onSearch: term => {},
        placeholder: 'Search example',
      }}
    />
  );
}

Call to Action

The callToActionProps prop takes an object of Hyperlink Props from the Hyperlink component.

import React from 'react';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return (
    <Header
      isCompact
      isInverse
      logo={<strong>LOGO</strong>}
      callToActionProps={{
        children: 'Enter an Access Code',
        target: '_blank',
        to: '#',
      }}
    />
  );
}

Children

The children are displayed at the end of the Header, after the logo, call to action and search.

import React from 'react';
import { Header } from '@cengage-patterns/header';
import { NotificationsIcon, PersonIcon, SettingsIcon } from 'react-magma-icons';
import { IconButton, ButtonVariant } from 'react-magma-dom';


export function Example() {
  return (
    <Header
      isCompact
      isInverse
      logo={<strong>LOGO</strong>}
      searchProps={{
        onSearch: term => {},
      }}
    >
      <IconButton
        aria-label="Settings"
        icon={<SettingsIcon />}
        onClick={() => {}}
        variant={ButtonVariant.link}
      />
      <IconButton
        aria-label="Notifications"
        icon={<NotificationsIcon />}
        onClick={() => {}}
        variant={ButtonVariant.link}
      />
      <IconButton
        aria-label="Person"
        icon={<PersonIcon />}
        onClick={() => {}}
        variant={ButtonVariant.link}
      />
    </Header>
  );
}

Position

The position prop will set the positioning type with CSS. It accepts values absolute, fixed, relative, static and sticky, with static being the default.

If the position is set to sticky or fixed, the app bar will have a small drop-shadow.

import React from 'react';
import { AppBarPosition, Heading, Paragraph } from 'react-magma-dom';
import { Header } from '@cengage-patterns/header';


export function Example() {
  return (
    <div style={{ height: '300px', overflow: 'auto', position: 'relative' }}>
      <Header
        isCompact
        isInverse
        logo={<strong>LOGO</strong>}
        position={AppBarPosition.sticky}
      />
      <Heading level={2}>Lorem Ipsum</Heading>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis,
        libero eu posuere hendrerit, turpis massa placerat ex, sit amet luctus
        enim nunc a arcu. Mauris at lobortis urna. Nam suscipit purus convallis
        mauris iaculis, vitae fermentum ipsum faucibus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Donec congue eu felis a blandit.
      </Paragraph>
      <Paragraph>
        Phasellus sodales ut lorem at semper. Curabitur id hendrerit est, ac
        vestibulum neque. Curabitur ac elementum elit. Quisque eleifend tortor
        vitae ultrices tristique. Integer a elementum magna. Cras eget erat
        feugiat, dignissim ante in, blandit lectus. Donec sodales justo ligula,
        ornare congue felis facilisis mattis.
      </Paragraph>
      <Paragraph>
        Fusce faucibus venenatis arcu, ac sollicitudin nibh iaculis vitae. Nam
        risus nunc, mattis et maximus ac, dignissim at lectus. Sed eleifend
        euismod diam, at ornare lectus vestibulum et. Maecenas at sodales magna.
        Proin mollis elit nec lorem rhoncus, a suscipit metus imperdiet.
        Vestibulum ut magna imperdiet, bibendum felis semper, volutpat est. Duis
        congue porta justo, et interdum ligula vulputate et.
      </Paragraph>
      <Paragraph>
        Fusce vitae convallis ante. Pellentesque et enim ac dolor cursus
        ultricies at eget quam. Vestibulum euismod volutpat nulla eget
        porttitor. Morbi tempor fermentum viverra. Suspendisse potenti.
      </Paragraph>
    </div>
  );
}

Responsive Behavior

By specifying a breakpoint in pixels, the Header pattern will only display all content other than the header when the width of the browser is above that breakpoint. When the browser is more narrow than that breakpoint, a menu icon will appear if a onMenuButtonClick prop is provided.

The useMediaQuery hook can be used to change the isCompact prop for different screen sizes.

The Header does not provide a way to display the items that are hidden at smaller screen sizes. It is the responsibility of the consumer to display those items in another way.

import React from 'react';
import { Header } from '@cengage-patterns/header';
import { useMediaQuery, magma } from 'react-magma-dom';


export function Example() {
  const isSmallerScreen = useMediaQuery(
    `(max-width:${magma.breakpoints.medium}px)`
  );


  return (
    <Header
      breakpoint={magma.breakpoints.medium}
      callToActionProps={{
        children: 'Enter an Access Code',
        target: '_blank',
        to: '#',
      }}
      isCompact={isSmallerScreen}
      isInverse
      logo={<strong>LOGO</strong>}
      onMenuButtonClick={() => {}}
      searchProps={{
        onSearch: term => {},
        placeholder: 'Search example',
      }}
    />
  );
}

Header Props

Any other props supplied will be provided to the wrapping header element.

isCompact

Description

If true, the component will render at a shorter height with less padding

Type

boolean

Default

false

isInverse

Description

Type

boolean

Default

false

position

Description

Position of the AppBar

Type

enum, one of:
AppBarPosition.static
AppBarPosition.absolute
AppBarPosition.fixed
AppBarPosition.relative
AppBarPosition.sticky

Default

AppBarPosition.static

breakpoint

Description

Type

number

Default

-

logo

Description

Type

React.ReactNode

Default

-

onMenuButtonClick

Description

Type

function

Default

-

searchProps

Description

Type

SearchProps

Default

-

On this page

Deploys by Netlify