p Navbar is a layout container that appears in the header of apps and websites.

.docs-demo.columns
  .column
    .navbar
      .navbar-section
        a.navbar-brand.mr-2(href="#navbar") Spectre.css
        a.btn.btn-link(href="#navbar") Docs
        a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub
      .navbar-section
        .input-group.input-inline
          input.form-input(type="text" placeholder="search")
          button.btn.btn-primary.input-group-btn Search

p
  | The navbar component can include logo brand, nav links and buttons, search box or any combination of those elements.
  | Each section with the #[code navbar-section] class will be evenly distributed in the container.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

          Spectre.css
          Docs
          GitHub

            Search

p
  | You can use #[code navbar-center] class to have a centered section.

.docs-demo.columns
  .column.col-12
    .navbar
      .navbar-section
        a.btn.btn-link(href="#navbar") Docs
        a.btn.btn-link(href="#navbar") Examples
      .navbar-center
        img(src="img/spectre-logo.svg" alt="Spectre.css")
      .navbar-section
        a.btn.btn-link(href="https://twitter.com/spectrecss") Twitter
        a.btn.btn-link(href="https://github.com/picturepan2/spectre") GitHub

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

          Docs
          Examples

          Twitter
          GitHub

