Navbar

The b.Navbar constructor creates a navbar. The brand section is added only if at least one brand, start or end child is provided. The section part and the burger button are added only if at least one start or end child is provided. The click event on the burger, which toggles the navbar menu on mobile devices, is already included.

ModifierAction
b.FixedTopFix the navbar to the top of the page - the has-navbar-fixed-top class is automatically added to the parent element (which should be the body for this to work)
b.FixedBottomFix the navbar to the bottom of the page - the has-navbar-fixed-bottom class is automatically added to the parent element (which should be the body for this to work)
b.TransparentRemove hover and active backgrounds from the items
b.SpacedIncrease padding
b.ShadowAdd a small shadow around the navbar
b.PrimarySet color to primary
b.LinkSet color to link
b.InfoSet color to info
b.SuccessSet color to success
b.WarningSet color to warning
b.DangerSet color to danger
b.BlackSet color to black
b.LightSet color to light
b.DarkSet color to dark
b.WhiteSet color to white
ChildAction
b.NavbarBrand(...any)Apply children to the brand section (left side, always visible)
b.NavbarStart(...any)Apply children to the start section (left part of the menu)
b.NavbarEnd(...any)Apply children to the end section (right part of the menu)
b.Container(...any)Use element as an intermediate container
Anything elseApply children to the <nav class="navbar"> element

The b.NavbarItem constructor creates a navbar item for a navbar brand, start or end section, or for a b.NavbarDropdown.

ModifierAction
b.ExpandedTurn the item into a full-width element
b.TabAdd a bottom border on hover, always show the bottom border when adding b.Active
b.HasDropdownMake the item a link+dropdown container
b.HasDropupMake the item a dropdown container, with the dropdown opening above the link
b.HoverableMake the included dropdown automatically show on hover
b.ActiveForce the dropdown to be open

The b.NavbarAHref constructor creates a link item for a navbar brand, start or end section, or to a b.NavbarDropdown.

ModifierAction
b.ExpandedTurn the item into a full-width element
b.TabAdd a bottom border on hover, always show the bottom border when adding b.Active

The b.NavbarDropdown constructor creates navbar item with a dropdown menu.

ModifierAction
b.HoverableMake the menu open when the cursor hovers the trigger
b.ClickableMake the menu open when the button is clicked (javascript is automatically added)
b.UpMake the dropdown open to the top
b.ArrowlessRemove the arrow in the item
b.BoxedShow the dropdown as a boxed element, without the top grey border
b.ActiveForce the dropdown to be open
b.RightUsed when a dropdown is on the right side (end section), in order to open its content aligned to the right of the link
ChildAction
b.OnItem(...any)Apply children to the <div class="navbar-item"> element
b.OnLink(...any)Apply children to the <a class="navbar-link"> element
b.OnDropdown(...any)Apply children to the <div class="navbar-dropdown"> element
e.ClassApply class to the <div class="navbar-dropdown"> element
stringAdd string to the <a class="navbar-link"> element
Anything elseApply child to the <div class="navbar-dropdown"> element

The b.NavbarLink constructor creates a link element, to include in a b.NavbarItem with the b.HasDropdown modifier.

ModifierAction
b.ArrowlessRemove the arrow in the item

The b.NavbarDivider constructor creates a divider element, to include in a b.NavbarDropdown.

Bulma examples

Bulma documentation

Basic Navbar

Bulma documentation
Example
ResultHTML
Code
b.Navbar(
	e.AriaNavigation,
	e.AriaLabel("main navigation"),
	b.NavbarBrand(
		b.NavbarAHref(
			"https://bulma.io",
			e.ImgSrc(
				"https://bulma.io/assets/images/bulma-logo.png",
				e.Width("112"), e.Height("28"),
			),
		),
	),
	b.NavbarStart(
		b.NavbarAHref("#", "Home"),
		b.NavbarAHref("#", "Documentation"),
		b.NavbarDropdown(
			"More",
			b.Hoverable,
			b.NavbarAHref("#", "About"),
			b.NavbarAHref("#", "Jobs"),
			b.NavbarAHref("#", "Contact"),
			b.NavbarDivider(),
			b.NavbarAHref("#", "Report an issue"),
		),
	),
	b.NavbarEnd(
		b.NavbarItem(
			b.Buttons(
				b.ButtonA(
					b.Primary,
					e.Strong("Sign up"),
				),
				b.ButtonA(
					b.Light,
					"Log in",
				),
			),
		),
	),
)

Transparent navbar

Bulma documentation
Example
ResultHTML
Code
b.Navbar(
	b.Transparent,
	b.NavbarBrand(
		b.NavbarAHref(
			"https://bulma.io",
			e.ImgSrc("https://bulma.io/assets/images/bulma-logo.svg"),
		),
	),
	b.NavbarStart(

		b.NavbarAHref("https://bulma.io/", "Home"),
		b.NavbarDropdown(
			b.OnLink(
				e.A,
				e.Href("https://bulma.io/documentation/overview/start/"),
				"Docs",
			),
			b.Active,
			b.Boxed,
			b.NavbarAHref("https://bulma.io/documentation/overview/start/", "Overview"),
			b.NavbarAHref("https://bulma.io/documentation/overview/modifiers/", "Modifiers"),
			b.NavbarAHref("https://bulma.io/documentation/columns/basics/", "Columns"),
			b.NavbarAHref("https://bulma.io/documentation/layout/container/", "Layout"),
			b.NavbarAHref("https://bulma.io/documentation/form/general/", "Form"),
			b.NavbarDivider(),
			b.NavbarAHref("https://bulma.io/documentation/elements/box/", "Elements"),
			b.NavbarAHref("https://bulma.io/documentation/breadcrumb/", b.Active, "Components"),
		),
	),
	b.NavbarEnd(
		b.NavbarItem(
			b.Field(
				b.Grouped,
				b.Control(
					html.P,
					b.ButtonA(
						e.DataAttr("social-network", "Twitter"),
						e.DataAttr("social-action", "tweet"),
						e.DataAttr("social-target", "https://bulma.io"),
						e.Target("_blank"),
						e.Href("https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms"),
						fa.Icon(fa.Brand, "twitter"),
						"Tweet",
					),
				),
				b.Control(
					html.P,
					b.ButtonA(
						b.Primary,
						e.Href("https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip"),
						fa.Icon(fa.Solid, "download"),
						"Download",
					),
				),
			),
		),
	),
)

Fixed navbar

Bulma documentation

Add b.FixedTop or b.FixedBottom to the b.Navbar arguments.

Colors

Bulma documentation

In order to change the background color of the navbarn simply, apply one of the color modifiers to the b.Navbar Element:

  • b.Primary
  • b.Link
  • b.Info
  • b.Success
  • b.Warning
  • b.Danger
  • b.Black
  • b.Dark
  • b.Light
  • b.White