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
- Your project needs to be running React v16.8 or greater
react-magma-icons
andreact-magma-dom
must be installed as peer dependencies- 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>} />;}
Search
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 (<HeaderisCompactisInverselogo={<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 (<HeaderisCompactisInverselogo={<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 (<HeaderisCompactisInverselogo={<strong>LOGO</strong>}searchProps={{onSearch: term => {},}}><IconButtonaria-label="Settings"icon={<SettingsIcon />}onClick={() => {}}variant={ButtonVariant.link}/><IconButtonaria-label="Notifications"icon={<NotificationsIcon />}onClick={() => {}}variant={ButtonVariant.link}/><IconButtonaria-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' }}><HeaderisCompactisInverselogo={<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 luctusenim nunc a arcu. Mauris at lobortis urna. Nam suscipit purus convallismauris iaculis, vitae fermentum ipsum faucibus. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Donec congue eu felis a blandit.</Paragraph><Paragraph>Phasellus sodales ut lorem at semper. Curabitur id hendrerit est, acvestibulum neque. Curabitur ac elementum elit. Quisque eleifend tortorvitae ultrices tristique. Integer a elementum magna. Cras eget eratfeugiat, 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. Namrisus nunc, mattis et maximus ac, dignissim at lectus. Sed eleifendeuismod 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. Duiscongue porta justo, et interdum ligula vulputate et.</Paragraph><Paragraph>Fusce vitae convallis ante. Pellentesque et enim ac dolor cursusultricies at eget quam. Vestibulum euismod volutpat nulla egetporttitor. 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 (<Headerbreakpoint={magma.breakpoints.medium}callToActionProps={{children: 'Enter an Access Code',target: '_blank',to: '#',}}isCompact={isSmallerScreen}isInverselogo={<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