Navbar

Top navigation, typically used as primary navigation in websites or stacked application layouts.

Theming

The Navbar component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

container
inner
brand
content
item
link

Default theme

import { anatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'

const parts = anatomy('navbar').parts(
  'container',
  'inner',
  'brand',
  'content',
  'item',
  'link'
)

const { defineMultiStyleConfig, definePartsStyle } =
  createMultiStyleConfigHelpers(parts.keys)

export const navbarTheme = defineMultiStyleConfig({
  baseStyle: definePartsStyle({
    container: {
      display: 'flex',
      bg: 'chakra-body-bg',
      zIndex: 'overlay',
      width: 'full',
      height: 'auto',
      alignItems: 'center',
      justifyContent: 'center',
      data: {
        '& [data-menu-open=true]': {
          border: 'none',
        },
      },
    },
    inner: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      width: 'full',
      height: 'var(--navbar-height)',
      px: 6,
      gap: 4,
      flexWrap: 'nowrap',
    },
    toggle: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 6,
      height: 'full',
      outline: 'none',
      borderRadius: 'sm',
    },
    brand: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      height: 'full',
      bg: 'transparent',
      textDecoration: 'none',
      color: 'inherit',
      whiteSpace: 'nowrap',
      boxSizing: 'border-box',
    },
    content: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      flex: 1,
      listStyle: 'none',
    },
    item: {
      display: 'inline-flex',
      p: 0,
    },
    link: {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      textDecoration: 'none',
      whiteSpace: 'nowrap',
      boxSizing: 'border-box',
      borderRadius: 'md',
      transitionProperty: 'common',
      transitionDuration: 'normal',
      px: 3,
      h: 8,
      _hover: {
        bg: 'gray.100',
        textDecoration: 'none',
        _dark: {
          bg: 'gray.700',
        },
      },
      _active: {
        fontWeight: 'semibold',
      },
    },
  }),
})

Was this helpful?