kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity
twbs--bootstrap/docs/components/navbar.md

15 KiB
Raw Blame History

layout title description group
docs Navbar Documentation and examples for Bootstrap's powerful, responsive navigation header. components

The navbar is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to our Collapse plugin, it can easily integrate responsive behaviors.

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

Basics

Here's what you need to know before getting started with the navbar:

  • Navbars require a wrapping .navbar and a color scheme.
  • Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
  • Use .float-*-left and .float-*-right to quickly align sub-components.
  • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Supported content

Navbars come with built-in support for a handful of sub-components. Mix and match from the following as needed:

  • .navbar-brand for your company, product, or project name
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns)
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • Inline forms with .float- utilities for form controls and components.
  • .navbar-text for adding vertically centered strings of text.

Here's an example of all the sub-components included in a default, non-responsive light themed navbar. See the responsive examples for collapsing nav support.

{% example html %}

Navbar Search {% endexample %}

Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

{% example html %}

Navbar

Navbar

{% endexample %}

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

{% example html %}

{% endexample %}

{% example html %}

Bootstrap {% endexample %}

Nav

Navbar navigation is similar to our regular nav options—use the .nav base class with a modifier to achieve a particular look. In this case you'll want .nav.navbar-nav.

Active states—with .active—to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-items.

{% example html %}

{% endexample %}

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

{% example html %}

{% endexample %}

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

{% example html %}

{% endexample %}

Forms

Place various form controls and components within a navbar with .form-inline. Align them with .float- utilities as needed.

{% example html %}

Search {% endexample %}

Input groups work, too:

{% example html %}

@
{% endexample %}

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilites can be used to align different sized elements.

{% example html %}

Main button Smaller button {% endexample %}

Text

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

{% example html %}

Navbar text with an inline element {% endexample %}

Using our utility classes, you can change the alignment and appearance of your navbar text.

{% example html %}

Muted navbar text that's floated right {% endexample %}

Similarly, you can use utility classes to align navbar text to other navbar elements like the brand and navigation (which are automatically floated already).

{% example html %}

Navbar Navbar text that's floated left {% endexample %}

Color schemes

Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and background-color utilities. Put another way, you specify light or dark and apply a background color.

Here are some examples to show what we mean.

{% highlight html %}

{% endhighlight %}

Containers

Although it's not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

{% example html %}

{% endexample %}

{% example html %}

{% endexample %}

Placement

Navbars can be statically placed (their default behavior), static without rounded corners, or fixed to the top or bottom of the viewport.

{% example html %}

Full width {% endexample %}

{% example html %}

Fixed top {% endexample %}

{% example html %}

Fixed bottom {% endexample %}

Collapsible content

Our collapse plugin allows you to use a <button> or <a> to toggle hidden content.

{% example html %}

Collapsed content

Toggleable via the navbar brand.
{% endexample %}

For more complex navbar patterns, like those used in Bootstrap v3, use the .navbar-toggleable-* classes in conjunction with the .navbar-toggler. These classes override our responsive utilities to show navigation only when content is meant to be shown.

{% example html %}

Navbar Search
{% endexample %}