Navbar

Navbars are flexbox based navigation headers which can be used to display branding, navigation links, buttons, forms, and also regular text.

Before we begin

Here's a list of things to understand about navbars in Halfmoon.

  • Navbars are fixed to the top by default. The content wrapper (.content-wrapper) starts right below it.
  • Navbars must be the immediate children of the page wrapper (.page-wrapper). You can learn more about this in the page building section (opens in new tab) of the docs.
  • When the default navbar is used, the page wrapper (.page-wrapper) must be given the .with-navbar class. This automatically adjusts all the other content in the page to accomodate the navbar. Moreover, without this class, the navbar will not be displayed.

With all that said, given below is an example of a navbar. You should try resizing your browser window (if you can) to see how the navbar works differently on different screen sizes.

Page title

Card title

On this page 

<body>
  <!-- Page wrapper with .with-navbar class -->
  <div class="page-wrapper with-navbar">
    <!-- Navbar (immediate child of the page wrapper) -->
    <nav class="navbar">
      <!-- Navbar content (with toggle sidebar button) -->
      <div class="navbar-content">
        <button class="btn btn-action" type="button">
          <i class="fa fa-bars" aria-hidden="true"></i>
          <span class="sr-only">Toggle sidebar</span> <!-- sr-only = show only on screen readers -->
        </button>
      </div>
      <!-- Navbar brand -->
      <a href="#" class="navbar-brand">
        <img src="..." alt="...">
        Brand
      </a>
      <!-- Navbar text -->
      <span class="navbar-text text-monospace">v3.0</span> <!-- text-monospace = font-family shifted to monospace -->
      <!-- Navbar nav -->
      <ul class="navbar-nav d-none d-md-flex"> <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) -->
        <li class="nav-item active">
          <a href="#" class="nav-link">Docs</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Products</a>
        </li>
      </ul>
      <!-- Navbar form (inline form) -->
      <form class="form-inline d-none d-md-flex ml-auto" action="..." method="..."> <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px), ml-auto = margin-left: auto -->
        <input type="text" class="form-control" placeholder="Email address" required="required">
        <button class="btn btn-primary" type="submit">Sign up</button>
      </form>
      <!-- Navbar content (with the dropdown menu) -->
      <div class="navbar-content d-md-none ml-auto"> <!-- d-md-none = display: none on medium screens and up (width > 768px), ml-auto = margin-left: auto -->
        <div class="dropdown with-arrow">
          <button class="btn" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
            Menu
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1"> <!-- w-200 = width: 20rem (200px) -->
            <a href="#" class="dropdown-item">Docs</a>
            <a href="#" class="dropdown-item">Products</a>
            <div class="dropdown-divider"></div>
            <div class="dropdown-content">
              <form action="..." method="...">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Email address" required="required">
                </div>
                <button class="btn btn-primary btn-block" type="submit">Sign up</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
  </div>

  <!-- Requires halfmoon.js for the dropdowns -->
  <script src="path/to/halfmoon.js"></script>
</body>

The following makes up the content inside the navbar:

  • .navbar-brand — can be used for branding. The branding supports images as well, as can be seen above.
  • .navbar-nav — can be used for the main navigation links by placing the links (.nav-link) inside list items with the class .nav-item. The link inside the list item with the class .active will have a different style, showing that it is the active one.
  • .navbar-text — can be used for placing text inside the navbar. The text will have a slightly muted color to differentiate them from the links.
  • .navbar-content — can be used as a container for buttons, badges, dropdowns, or most other content for that matter. Buttons with the .btn-action class have a more square-ish appearance. These types of buttons work great with icons representing different actions.
  • .form-inline — can be used to create forms inside the navbar. Learn more about inline forms in the form docs section (opens in new tab).

All the above have the display: flex property. On a side note, the icons being used are part of the Font Awesome 4.7.0 iconset.

Making it responsive

Navbars are made responsive by strategically showing/hiding different elements for different breakpoints using display utilities (opens in new tab). For instance, in the above example, the navigation list (.navbar-nav) and the inline sign up form (.form-inline) are displayed only on medium screens and up (width > 768px) using the .d-none and .d-md-flex classes. At the same time, the dropdown menu (which contains replacements for the navigation list and the inline sign up form) is displayed only on small screens and down (width <= 768px) using the .d-md-none class. This way, the navbar effectively has the same functionalities on every device.

Positioning content

As mentioned above, everything inside navbars are flex items, so they can be positioned using utility classes. For instance, the .ml-auto class will push that component and all the others that come after it, to the right. In the above example, the .ml-auto class has been used to push the inline sign up form and the dropdown menu to the right of the navbar.

Please note, this class also has responsive variations, ie, .ml-{breakpoint}-auto which can be used to push components to the right only on certain breakpoints. The {breakpoint} can be sm, md, lg, or xl.

Justify content #

Since navbars are based on flexbox, you can use flex utilities (opens in new tab) to justify the content inside. For example, adding the class .justify-content-between will evenly space out each component inside the navbar. This is shown in the example below.

Page title

Card title 

<!-- Navbar with content justified between -->
<nav class="navbar justify-content-between"> <!-- justify-content-between = justify-content: space-between -->
  <!-- Navbar content with menu button -->
  <div class="navbar-content">
    <button class="btn" type="button">
      <i class="fa fa-bars" aria-hidden="true"></i> 
      Menu
    </button>
  </div>
  <!-- Navbar brand -->
  <a href="#" class="navbar-brand">
    <img src="..." alt="...">
  </a>
  <!-- Navbar content with sign up button -->
  <div class="navbar-content">
    <button class="btn btn-primary" type="button">Sign up</button>
  </div>
</nav>

Using navbar items as dropdowns #

Navbar items (.nav-item) can also be used as dropdowns, with the links (.nav-link) as the dropdown toggle. 

<!-- Navbar with a navbar-item as dropdown -->
<nav class="navbar">
  <!-- Navbar brand -->
  <a href="#" class="navbar-brand">
    <img src="..." alt="...">
  </a>
  <!-- Navbar text -->
  <span class="navbar-text ml-5"> <!-- ml-5 = margin-left: 0.5rem (5px) -->
    <span class="badge text-monospace">v3.0</span> <!-- text-monospace = font-family shifted to monospace -->
  </span>
  <!-- Navbar nav -->
  <ul class="navbar-nav ml-auto"> <!-- ml-auto = margin-left: auto -->
    <li class="nav-item active">
      <a href="#" class="nav-link">Docs</a>
    </li>
    <li class="nav-item dropdown with-arrow">
      <a class="nav-link" data-toggle="dropdown" id="nav-link-dropdown-toggle">
        Products 
        <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5= margin-left: 0.5rem (5px) -->
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-link-dropdown-toggle">
        <a href="#" class="dropdown-item">API builder</a>
        <a href="#" class="dropdown-item">Functions</a>
        <a href="#" class="dropdown-item">
          Analytics
          <strong class="badge badge-success float-right">New</strong> <!-- float-right = float: right -->
        </a>
        <div class="dropdown-divider"></div>
        <div class="dropdown-content">
          <a href="#" class="btn btn-block" role="button">
            See all products
            <i class="fa fa-angle-right ml-5" aria-hidden="true"></i> <!-- ml-5= margin-left: 0.5rem (5px) -->
          </a>
        </div>
      </div>
    </li>
  </ul>
</nav>

<!-- Requires halfmoon.js for the dropdown -->
<script src="path/to/halfmoon.js"></script>

Using input groups #

You can also use input groups inside navbars by placing them inside an inline form.

Page title

Card title 

<!-- Navbar with input group -->
<nav class="navbar">
  <!-- Navbar brand -->
  <a href="#" class="navbar-brand">
    <img src="..." alt="...">
  </a>
  <!-- Inline form with input group -->
  <form class="form-inline ml-auto" action="..." method="..."> <!-- ml-auto = margin-left: auto -->
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search docs" required="required">
      <div class="input-group-append">
        <button class="btn" type="submit">
          <i class="fa fa-search" aria-hidden="true"></i>
          <span class="sr-only">Search docs</span> <!-- sr-only = show only on screen readers -->
        </button>
      </div>
    </div>
  </form>
</nav>

Building a page #

For the next example, let's build a page with the following components:

  • Navbar (default, fixed top)
  • Sidebar — see docs page (opens in new tab)
  • Navbar fixed bottom

Please note the .with-navbar and .with-navbar-fixed-bottom classes on the same page wrapper (along with .with-sidebar).

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with navbar, sidebar, and navbar fixed bottom -->
  <div class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom">
    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Sidebar -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

Static navbars #

So far, we have only looked at navbars which are fixed on the page (either on top or bottom). However, navbars can also be static (not fixed). You can create static navbars by simply placing the navbars inside the content wrapper (.content-wrapper). This way, they are not the immediate child of the page wrapper (.page-wrapper), so they will not stay fixed in one place.

Please note, for static navbars, you do not need the .with-navbar or .with-navbar-fixed-bottom classes on the page wrapper. Moreover, adding the .navbar-static-bottom class to a static navbar will give it the same appearance as .navbar-fixed-bottom. This is useful if you want to place a static navbar at the end of your content (like the example below shows).

Page title

Card title

On this page 

<body>
  <!-- Page wrapper -->
  <div class="page-wrapper">
    <!-- Content wrapper with static navbars -->
    <div class="content-wrapper">
      <!-- Static navbar -->
      <nav class="navbar">
        <!-- Navbar content with toggle sidebar button -->
        <div class="navbar-content">
          <button class="btn btn-action" type="button">
            <i class="fa fa-bars" aria-hidden="true"></i>
            <span class="sr-only">Toggle sidebar</span> <!-- sr-only = show only on screen readers -->
          </button>
        </div>
        <!-- Navbar brand -->
        <a href="#" class="navbar-brand">
          <img src="..." alt="...">
          Brand
        </a>
        <!-- Navbar content with sign up button -->
        <div class="navbar-content ml-auto"> <!-- ml-auto = margin-left: auto -->
          <button class="btn btn-primary" type="button">Sign up</button>
        </div>
      </nav>

      <!-- Content -->
      <div class="container-fluid">
        ...
      </div>

      <!-- Static bottom navbar -->
      <nav class="navbar navbar-static-bottom">
        <ul class="navbar-nav ml-auto"> <!-- ml-auto = margin-left: auto -->
          <li class="nav-item">
            <a href="#" class="nav-link">Contact</a>
          </li>
        </ul>
        <!-- Navbar text -->
        <span class="navbar-text">
          &copy; Brand, All rights reserved
        </span>
      </nav>
    </div>
  </div>
</body>

Aligning with content #

Recall that Halfmoon comes with three different types of containers:

  • .container which sets a different max-width at each responsive breakpoint.
  • .container-{breakpoint} which is width: 100% until the specified breakpoint.
  • .container-fluid which is width: 100% at all breakpoints.

You can use any of the above containers inside navbars to align everything inside the navbar with the content of the page. It is very important to understand that containers do not have margin or padding in Halfmoon. So this alignment is assuming that you are actually building the page using content-containers (.content) and cards (.card) inside the actual containers, like in this example (opens in new tab).

It should also be noted that this works best with static navbars, because if navbars are fixed in place and if the content scrolls, then the alignment is off on the right side due to the presence of the scrollbar inside the .content-wrapper. However, you can still use containers inside fixed navbars for the max-width property, which can be useful in certain situations.

Page title

Card title

On this page 

<body>
  <!-- Page wrapper -->
  <div class="page-wrapper">
    <!-- Content wrapper with static navbars -->
    <div class="content-wrapper">
      <!-- Static navbar (aligned with content) -->
      <nav class="navbar">
        <div class="container-fluid">
          <!-- Navbar content with toggle sidebar button -->
          <div class="navbar-content">
            <button class="btn btn-action" type="button">
              <i class="fa fa-bars" aria-hidden="true"></i>
              <span class="sr-only">Toggle sidebar</span> <!-- sr-only = show only on screen readers -->
            </button>
          </div>
          <!-- Navbar brand -->
          <a href="#" class="navbar-brand">
            <img src="..." alt="...">
            Brand
          </a>
          <!-- Navbar content with sign up button -->
          <div class="navbar-content ml-auto"> <!-- ml-auto = margin-left: auto -->
            <button class="btn btn-primary" type="button">Sign up</button>
          </div>
        </div>
      </nav>

      <!-- Content -->
      <div class="container-fluid">
        ...
      </div>

      <!-- Static bottom navbar (aligned with content) -->
      <nav class="navbar navbar-static-bottom">
        <div class="container-fluid">
          <ul class="navbar-nav ml-auto"> <!-- ml-auto = margin-left: auto -->
            <li class="nav-item">
              <a href="#" class="nav-link">Contact</a>
            </li>
          </ul>
          <!-- Navbar text -->
          <span class="navbar-text">
            &copy; Brand, All rights reserved
          </span>
        </div>
      </nav>
    </div>
  </div>
</body>
Up next: Sidebar
On this page
Navbar Justify content Using navbar items as dropdowns Using input groups Navbar fixed bottom Building a page Static navbars Aligning with content

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2024, Halfmoon UI