Header

Layout Component
1import { Header } from 'maker-ui'

The Header component renders a <header> tag that contains all components for desktop and mobile navigation.

Props#

PropDescription
absolute
Type
boolean
Overrides header.absolute from Maker UI options.
background
Type
string | string[]
Overrides the Header's default --color-bg_header CSS variable that you can set in Maker UI options. Note: This doesn't have to be a color - you can use a gradient or an image as well.
css
Type
object
Applies responsive CSS styles to the component.
sticky
Type
boolean
Overrides header.sticky from Maker UI options.
stickyOnMobile
Type
boolean
Overrides header.stickyOnMobile from Maker UI options.
stickyUpScroll
Type
boolean
Overrides header.stickyUpScroll from Maker UI options.
The override props are designed for conditional use cases or runtime logic. Whenever possible, use Maker UI options instead.

Maker UI Options#

Your options configuration has a header object with the following properties:

OptionDescription
absolute
Type
boolean
If true, the header will be absolutely positioned so site content begins at the top of the viewport.
Defaultfalse
breakpoint
Type
string | number
A breakpoint that controls when the header switches from desktop to mobile navigation. You may also use an index to access a breakpoint in the options.breakpoints array.
Default0
The first index of options.breakpoints
colorButton
Type
| 'default'
| React.ReactNode
| ((currentMode?: string, attributes?: object) => React.ReactNode)
Helps you customize the header's color toggle. By default, it prints the name of the current color mode, but you can use a custom React component or a JSX callback to animate the icon's state.
dropdown
Type
{
caret: boolean | React.ReactElement
transition: 'scale' | 'fade' | 'fade-down' | 'fade-up' | 'none'
}
Controls the header's default dropdown menu settings. Yo u can set a custom caret component to replace the default down caret. You can also choose a dropdown animation.
errorBoundary
Type
boolean
When true, this will wrap the inner contents of the Topbar in an Error Boundary that you can customize with options.errors.
maxWidth
Type
string | number | (string | number)[]
The max-width of the header's content container. Can be a responsive array.
Default1460
menuButton
Type
| 'default'
| React.ReactNode
| ((isOpen?: boolean, attributes?: object) => React.ReactNode)
Lets you customize the mobile menu toggle. This will render a traditional hamburger icon by default, but you can use a custom React component or a JSX callback to animate the icon's state.
menuOverflow
Type
'wrap' | 'scroll'
Lets you decide if your nav menu should wrap to the next line or scroll horizontally when the menu is larger than its container width.
mobileNavType
Type
'basic'
| 'basic-menu-left'
| 'logo-center'
| 'logo-center-alt'
The Navbar's layout on mobile devices. See below for details.
Defaultbasic
navType
Type
'basic'
| 'basic-left'
| 'basic-right'
| 'center'
| 'split'
| 'minimal'
| 'minimal-left'
| 'minimal-center'
| 'reverse'
The Navbar's layout on desktop devices. See below for details.
Defaultbasic
scrollClass
Type
{
scrollTop: number
className: string
}
Adds a custom class to the header when the user has scrolled past a specified point.
showColorButton
Type
A boolean that determines if the header nav area should display a color toggle button.
Defaulttrue
showColorButtonOnMobileA boolean that lets you hide the header's color toggle button on mobile.
Defaulttrue
showWidgetsOnMobile
Type
A boolean that lets you hide the nav widget area slot on mobile.
Defaultfalse
sticky
Type
A boolean that determines if the header sticks to the top of the viewport while scrolling.
Defaultfalse
stickyOnMobile
Type
A boolean that determines if the header sticks to the top of the viewport while scrolling on mobile.
Defaultfalse
stickyUpScroll
Type
| 'boolean'
| { delay: number, start: number }
Lets you hide the header on down scroll and reveal it when scrolling back up. You can use the delay property to set a time in milliseconds after the upscroll event to begin the reveal transition. You can also set a start scrollTop value (pixels) to determine when the effect should begin.
Defaultfalse

Usage#

Add Header to the beginning of your layout tree and wrap it around Navbar and MobileMenu:

1import {
2  Layout,
3  Header,
4  Navbar,
5  MobileMenu
6  Content,
7  Main,
8  Footer
9} from 'maker-ui'
10

11// This example omits key props like menus, options, etc.
12

13export const MyLayout = ({ children }) => (
14  <Layout>
15    <Header>
16      <Navbar />
17      <MobileMenu />
18    </Header>
19    <Content>
20      <Main>{children}</Main>
21    </Content>
22    <Footer />
23  </Layout>
24)

Desktop#

Mobile#

Contents