Header
Layout Component1import { Header } from 'maker-ui'
The Header component renders a <header>
tag that contains all components for desktop and mobile navigation.
Props#
Prop | Description |
---|---|
absolute | Type boolean header.absolute from Maker UI options. |
background | Type string | string[] --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 |
sticky | Type boolean header.sticky from Maker UI options. |
stickyOnMobile | Type boolean header.stickyOnMobile from Maker UI options. |
stickyUpScroll | Type boolean 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:
Option | Description |
---|---|
absolute | Type boolean Defaultfalse |
breakpoint | Type string | number options.breakpoints array. Default0 The first index of options.breakpoints |
colorButton | Type | 'default' | React.ReactNode | ((currentMode?: string, attributes?: object) => React.ReactNode) |
dropdown | Type { caret: boolean | React.ReactElement transition: 'scale' | 'fade' | 'fade-down' | 'fade-up' | 'none' } |
errorBoundary | Type boolean options.errors . |
maxWidth | Type string | number | (string | number)[] Default1460 |
menuButton | Type | 'default' | React.ReactNode | ((isOpen?: boolean, attributes?: object) => React.ReactNode) |
menuOverflow | Type 'wrap' | 'scroll' |
mobileNavType | Type 'basic' | 'basic-menu-left' | 'logo-center' | 'logo-center-alt' Defaultbasic |
navType | Type 'basic' | 'basic-left' | 'basic-right' | 'center' | 'split' | 'minimal' | 'minimal-left' | 'minimal-center' | 'reverse' Defaultbasic |
scrollClass | Type { scrollTop: number className: string } |
showColorButton | Type Defaulttrue |
showColorButtonOnMobile | A boolean that lets you hide the header's color toggle button on mobile. Defaulttrue |
showWidgetsOnMobile | Type Defaultfalse |
sticky | Type Defaultfalse |
stickyOnMobile | Type Defaultfalse |
stickyUpScroll | Type | 'boolean' | { delay: number, start: number } 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 MobileMenu6 Content,7 Main,8 Footer9} from 'maker-ui'1011// This example omits key props like menus, options, etc.1213export 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)
Nav Types#
Desktop#
Mobile#
Contents