Navbar

Layout Component

import { 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.

If you use custom components for the grid areas, you must supply them as valid React elements in JSX syntax.

// For example:
<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) 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:

import { Layout, Header, Navbar, Content, Main, Footer } from 'maker-ui'

// Supply a custom logo and menu
import { primaryMenu } from './menus'
import { Logo } from './Logo'

export const MyLayout = ({ children }) => (
  <Layout>
    <Header>
      <Navbar logo={<Logo />} menu={primaryMenu} />
    </Header>
    <Content>
      <Main>{children}</Main>
    </Content>
    <Footer />
  </Layout>
)

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