Navbar
Layout Component1import { Navbar } from 'maker-ui'
The Navbar is your header's inner content wrapper. It uses a three column CSS grid layout to help you render common header elements like the logo, primary menu, and header widgets (social media icons, search bars, color mode buttons, etc.).
You can customize most of the Navbar's settings in your options.header
object. You can also use the Navbar's props to insert your custom components.
Nav Slots#
The Navbar provides 3 grid areas for custom components or Maker UI defaults:
logoSlot
menuSlot
widgetSlot
Maker UI comes with common nav layouts to help you get started. See Header Nav Types for more details on the default layouts.
1// For example:2<Navbar menuSlot={<MyCustomMenuComponent />} />
Props#
In addition to the props below, you can also add id
and className
props for custom selectors.
Prop | Description |
---|---|
colorButton | Type | 'default' | React.ReactNode | ((currentMode?: string, attributes?: object) => React.ReactNode) header.colorButton from Maker UI options. |
css | Type object css prop will be applied to the Navbar container. |
logo | Type React.ReactElement |
logoSlot | Type React.ReactNode |
maxWidth | Type string | number | (string | number)[] header.maxWidth from Maker UI options. |
menu | Type MakerMenu |
menuButton | Type | 'default' | React.ReactNode | ((isOpen?: boolean, attributes?: object) => React.ReactNode) header.menuButton from Maker UI options. |
menuSlot | Type React.ReactNode |
mobileType | Type 'basic' | 'basic-menu-left' | 'logo-center' | 'logo-center-alt' header.mobileNavType from Maker UI options. |
pathname | Type string .current class and aria-current to the active menu item. This feature is only useful if you use the menu prop. |
type | Type 'basic' | 'basic-left' | 'basic-right' | 'center' | 'split' | 'minimal' | 'minimal-left' | 'minimal-center' | 'reverse' header.navType from Maker UI options. |
widgetSlot | Type React.ReactNode |
Maker UI Options#
All options for the Navbar are stored in options.header
. See the Header docs for details.
Usage#
Add Navbar
inside the Header
wrapper component:
1import { Layout, Header, Navbar, Content, Main, Footer } from 'maker-ui'23// Supply a custom logo and menu4import { primaryMenu } from './menus'5import { Logo } from './Logo'67export const MyLayout = ({ children }) => (8 <Layout>9 <Header>10 <Navbar logo={<Logo />} menu={primaryMenu} />11 </Header>12 <Content>13 <Main>{children}</Main>14 </Content>15 <Footer />16 </Layout>17)
Maker UI's header layouts are extremely flexible. You probably won't need to supply custom logoSlot
or menuSlot
components.
Most of the time you can achieve your design by using the closest desktop or mobile layout, inserting a custom Logo component via the logo
prop, and adding a Maker UI compatible menu to the menu
prop.
Use the Maker UI options header
config + the root Layout component's global styles prop to polish your design.