Navbar

Interfaces

NavbarBrandProps

Props for the NavbarBrand component.

Extends

• HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
children?	ReactNode	Brand content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger"	Bulma color modifier for the brand.	React.HTMLAttributes.color
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Text color for the brand.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

---

NavbarBurgerProps

Props for the NavbarBurger component.

Extends

• ButtonHTMLAttributes<HTMLButtonElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
active?	boolean	Whether the burger is active.	-
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
aria-expanded?	boolean	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.	React.ButtonHTMLAttributes.aria-expanded
aria-label?	string	Defines a string value that labels the current element. See aria-labelledby.	React.ButtonHTMLAttributes.aria-label
children?	ReactNode	Custom content inside the burger.	React.ButtonHTMLAttributes.children
className?	string	Additional CSS classes.	React.ButtonHTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger"	Bulma color modifier for the burger.	React.ButtonHTMLAttributes.color
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
onClick?	MouseEventHandler<HTMLButtonElement>	Click handler.	React.ButtonHTMLAttributes.onClick
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Text color for the burger.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

---

NavbarDropdownMenuProps

Props for the NavbarDropdownMenu component.

Extends

• HTMLAttributes<HTMLDivElement>

Properties

Property	Type	Description	Overrides
children?	ReactNode	Dropdown menu content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
right?	boolean	Dropdown aligned right.	-
up?	boolean	Dropdown opens upwards.	-

---

NavbarDropdownProps

Props for the NavbarDropdown component.

Extends

• HTMLAttributes<HTMLDivElement>

Properties

Property	Type	Description	Overrides
active?	boolean	Dropdown is open.	-
children?	ReactNode	Dropdown content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
hoverable?	boolean	Dropdown opens on hover.	-
right?	boolean	Dropdown aligned right.	-
up?	boolean	Dropdown opens upwards.	-

---

NavbarItemProps

Props for the NavbarItem component.

Extends

• Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
active?	boolean	Whether the item is active.	-
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
as?	ElementType<any, keyof IntrinsicElements>	Render as a custom component.	-
bgColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Background color for the item.	-
children?	ReactNode	Navbar item content.	Omit.children
className?	string	Additional CSS classes.	Omit.className
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Text color for the item.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

---

NavbarMenuProps

Props for the NavbarMenu component.

Extends

• HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
active?	boolean	Whether the menu is active.	-
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
children?	ReactNode	Menu content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger"	Bulma color modifier for the menu.	React.HTMLAttributes.color
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Text color for the menu.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

---

NavbarProps

Props for the Navbar component.

Extends

• HTMLAttributes<HTMLElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
bgColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Background color for the navbar.	-
children?	ReactNode	Navbar content.	React.HTMLAttributes.children
className?	string	Additional CSS classes for the navbar.	React.HTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "white" | "light" | "dark"	Bulma color modifier for the navbar.	React.HTMLAttributes.color
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
fixed?	"top" | "bottom"	Whether the navbar is fixed to the top or bottom.	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Color for text.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
transparent?	boolean	Whether the navbar is transparent.	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

---

NavbarStartEndProps

Props for the NavbarStartEnd component.

Extends

• HTMLAttributes<HTMLDivElement>.Omit<BulmaClassesProps, "color" | "backgroundColor">

Properties

Property	Type	Description	Overrides
alignContent?	"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"	Align content (e.g., 'center', 'stretch').	-
alignItems?	"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"	Align items (e.g., 'center', 'flex-start').	-
alignSelf?	"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"	Align self (e.g., 'auto', 'center').	-
children?	ReactNode	Content.	React.HTMLAttributes.children
className?	string	Additional CSS classes.	React.HTMLAttributes.className
color?	"primary" | "link" | "info" | "success" | "warning" | "danger"	Bulma color modifier.	React.HTMLAttributes.color
colorShade?	"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"	Color shade suffix (e.g., '00', 'invert').	-
display?	"block" | "flex" | "inline" | "inline-block" | "inline-flex"	Display type (e.g., 'block', 'flex').	-
flexDirection?	"row" | "row-reverse" | "column" | "column-reverse"	Flex direction (e.g., 'row', 'column').	-
flexGrow?	"0" | "1"	Flex grow value (e.g., '0', '1').	-
flexShrink?	"0" | "1"	Flex shrink value (e.g., '0', '1').	-
flexWrap?	"nowrap" | "wrap" | "wrap-reverse"	Flex wrap (e.g., 'wrap', 'nowrap').	-
float?	"left" | "right"	Float direction (e.g., 'left', 'right').	-
fontFamily?	"primary" | "sans-serif" | "monospace" | "secondary" | "code"	Font family (e.g., 'sans-serif', 'code').	-
interaction?	"unselectable" | "clickable"	Interaction behavior (e.g., 'unselectable', 'clickable').	-
justifyContent?	"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"	Justify content (e.g., 'center', 'space-between').	-
m?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin (e.g., '0', '1').	-
mb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin bottom.	-
ml?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin left.	-
mr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin right.	-
mt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin top.	-
mx?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin horizontal (left and right).	-
my?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Margin vertical (top and bottom).	-
overflow?	"clipped"	Overflow behavior (e.g., 'clipped').	-
overlay?	boolean	Applies overlay styling if true.	-
p?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding (e.g., '0', '1').	-
pb?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding bottom.	-
pl?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding left.	-
pr?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding right.	-
pt?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding top.	-
px?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding horizontal (left and right).	-
py?	"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"	Padding vertical (top and bottom).	-
radius?	"radiusless"	Border radius style (e.g., 'radiusless').	-
responsive?	"mobile" | "narrow"	Responsive behavior (e.g., 'mobile', 'narrow').	-
shadow?	"shadowless"	Shadow style (e.g., 'shadowless').	-
textAlign?	"centered" | "justified" | "left" | "right"	Text alignment (e.g., 'centered', 'left').	-
textColor?	"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"	Text color.	-
textSize?	"1" | "2" | "3" | "4" | "5" | "6" | "7"	Text size (e.g., '1', '2').	-
textTransform?	"capitalized" | "lowercase" | "uppercase" | "italic"	Text transformation (e.g., 'uppercase', 'italic').	-
textWeight?	"light" | "normal" | "medium" | "semibold" | "bold"	Text weight (e.g., 'light', 'bold').	-
viewport?	"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"	Viewport for responsive classes (e.g., 'mobile', 'desktop').	-
visibility?	"hidden" | "sr-only"	Visibility (e.g., 'hidden', 'sr-only').	-

Variables

NavbarDivider

const NavbarDivider: React.FC<React.HTMLAttributes<HTMLHRElement>>

Bulma Navbar divider.

Param

Standard hr props.

Returns

The rendered divider.

Functions

Navbar()

Navbar(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar component, supports subcomponents for structured navigation.

Parameters

props

NavbarProps

Props for the Navbar component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered navbar.

See

Bulma Navbar documentation

---

NavbarBrand()

NavbarBrand(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar brand area (usually left side).

Parameters

props

NavbarBrandProps

Props for the NavbarBrand component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered brand area.

---

NavbarBurger()

NavbarBurger(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar burger (responsive menu toggle).

Parameters

props

NavbarBurgerProps

Props for the NavbarBurger component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered burger.

---

NavbarDropdown()

NavbarDropdown(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar dropdown (for nested dropdown menus).

Parameters

props

NavbarDropdownProps

Props for the NavbarDropdown component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered dropdown.

---

NavbarDropdownMenu()

NavbarDropdownMenu(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar dropdown menu container.

Parameters

props

NavbarDropdownMenuProps

Props for the NavbarDropdownMenu component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered dropdown menu.

---

NavbarEnd()

NavbarEnd(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar end area (right-aligned).

Parameters

props

NavbarStartEndProps

Props for the NavbarEnd component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered end area.

---

NavbarItem()

NavbarItem(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar item (link, button, etc).

Parameters

props

NavbarItemProps

Props for the NavbarItem component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered item.

---

NavbarMenu()

NavbarMenu(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar menu area (collapsible content).

Parameters

props

NavbarMenuProps

Props for the NavbarMenu component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered menu.

---

NavbarStart()

NavbarStart(props, deprecatedLegacyContext?): ReactNode

Bulma Navbar start area (left-aligned).

Parameters

props

NavbarStartEndProps

Props for the NavbarStart component.

deprecatedLegacyContext?

any

Deprecated

See

React Docs

Returns

ReactNode

The rendered start area.

References

default

Renames and re-exports Navbar