Navbar

Layout Component
1import { 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.

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.

If you use custom components for the grid areas, you must supply them as valid React elements in JSX syntax.
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.

PropDescription
colorButton
Type
| 'default'
| React.ReactNode
| ((currentMode?: string, attributes?: object) => React.ReactNode)
Overrides header.colorButton from Maker UI options.
css
Type
object
Styles from the css prop will be applied to the Navbar container.
logo
Type
React.ReactElement
A custom logo component that is wrapped in an anchor tag that leads to the home page.
logoSlot
Type
React.ReactNode
Replaces the Navbar logo-slot grid area with your own custom component.
maxWidth
Type
string | number | (string | number)[]
Overrides header.maxWidth from Maker UI options.
menu
Type
MakerMenu
If you supply a MakerMenu array to this prop, the Navbar will render a fully responsive and accessible menu complete with nested dropdowns.
menuButton
Type
| 'default'
| React.ReactNode
| ((isOpen?: boolean, attributes?: object) => React.ReactNode)
Overrides header.menuButton from Maker UI options.
menuSlot
Type
React.ReactNode
Replaces the Navbar menu-slot grid area with your own custom component.
mobileType
Type
'basic'
| 'basic-menu-left'
| 'logo-center'
| 'logo-center-alt'
Overrides the header.mobileNavType from Maker UI options.
pathname
Type
string
This prop lets you supply your app's current path to help the menu determine the current page and add a .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'
Overrides the header.navType from Maker UI options.
widgetSlot
Type
React.ReactNode
Replaces the Navbar widget-slot grid area with your own custom component.
The override props are designed for conditional use cases or runtime logic. Whenever possible, use Maker UI options instead.

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'
2
3// Supply a custom logo and menu
4import { primaryMenu } from './menus'
5import { Logo } from './Logo'
6
7export 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.

Contents