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?