/

/

Navbars


With Link

With Heading

BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    BS5NavbarBrand(["h1", "mb-0"], ["href":"#"], "Navbar")))

With Image

BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], 
      H5Img(["src":"/img/50x50.png", "alt":""]))))

With Image and Text

BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], 
      H5Img(["src":"/img/50x50.png", "alt":""]), 
      H5Span(["align-middle"], "Navbar"))))

With Unordered list

BS5Navbar(["navbar-light", "bg-light", "navbar-expand"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"]),
    BS5NavbarCollapse(
      BS5NavbarNav(
        BS5NavItem(
          BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")),
        BS5NavItem(
          BS5NavLink(["href":"#", "aria-current":"page"], "Link")),
        BS5NavItem(
          BS5NavLink(["href":"#", "aria-current":"page"], "Link")),
        BS5NavItem(
          BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link"))))))

Navbar with Form

BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Navbar"),
    H5Form(
      BS5InputGroup(
        BS5InputSearch(["placeholder":"Search text here", "aria-label":"Search input"],
          H5Button(["btn", "btn-secondary"], ["type":"submit"], "Search"))))))

Navbar with text

BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    H5Div(["navbar-text"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")))

Navbar colors

BS5Navbar(["navbar-dark", "bg-primary"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Primary"))), 
BS5Navbar(["navbar-dark", "bg-secondary"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Secondary"))),
BS5Navbar(["navbar-dark", "bg-success"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Success"))),
BS5Navbar(["navbar-dark", "bg-danger"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Danger"))),
BS5Navbar(["navbar-dark", "bg-warning"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Warning"))),
BS5Navbar(["navbar-dark", "bg-info"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Info"))),
BS5Navbar(["navbar-dark", "bg-dark"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Dark"))),
BS5Navbar(["navbar-light", "bg-light"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Light"))),
BS5Navbar(["navbar-light", "bg-white"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "White"))),
BS5Navbar(["navbar-light", "bg-transparent"], 
  BS5Container(
    BS5NavbarBrand(["href":"#"], "Transparent"))))

Navbar with toggler

Advanced example