# Navbar

Defines different styles for the navigation bar.

## Usage

The Navbar component consists of the navbar itself and one or more navigations.

Class | Description
--- | ---
`.uk-navbar` | Add this class to a `<nav>` element to define the Navbar component.
`.uk-navbar-nav` | Add this class to a `<ul>` element to create a navigation. Use `<a>` elements as menu items within the list.
`.uk-active` | Add this class to a list item to apply an active state.
`.uk-parent` | Add this class to indicate a parent menu item.

### Example

### Markup

    <nav class="uk-navbar">
        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="">...</a></li>
            <li><a href="">...</a></li>
            <li class="uk-parent"><a href="">...</a></li>
        </ul>
    </nav>

### Navbar flip

Add the `.uk-navbar-flip` class to a `<div>` element to group and align navigations and items to the right.

#### Example

### Markup

    <nav class="uk-navbar">
        <div class="uk-navbar-flip">
            <ul class="uk-navbar-nav">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </nav>

### Navbar subtitle

Add the `.uk-navbar-nav-subtitle` class to an `<a>` element in the list item to indicate that it has a subtitle. Use a `<div>` element for the subtitle itself.

#### Example

### Markup

    <nav class="uk-navbar">
        <ul class="uk-navbar-nav">
            <li><a href="" class="uk-navbar-nav-subtitle">
                ...
                <div>...</div>
            </a></li>
        </ul>
    </nav>

## Content

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

Class | Description
--- | ---
`.uk-navbar-content` | Add this class to a `<div>` element, which serves as a container for your custom content. The content will be centered vertically.
`.uk-navbar-brand` | Add this class to an `<a>` or `<div>` element to indicate your brand.
`.uk-navbar-center` | Add this class to center your navbar content or brand. The element needs to be the last child in the navbar.
`.uk-navbar-toggle` | Add this class to an `<a>` or `<div>` element to create an icon as a toggle.
`.uk-navbar-toggle-alt` | Add this class to create an alternative icon as a toggle.

### Example

### Markup

    <nav class="uk-navbar">
        <a href="" class="uk-navbar-brand">...</a>
        <ul class="uk-navbar-nav">...</ul>
        <div class="uk-navbar-content">...</div>
        <div class="uk-navbar-content uk-navbar-center">...</div>
        <a href="" class="uk-navbar-toggle"></a>
    </nav>

## Responsive visibility

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

### Example

Resize your browser window to see it in action.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

### Markup

    <nav class="uk-navbar">
        <ul class="uk-navbar-nav uk-hidden-small">...</ul>
        <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
    </nav>

    <div id="my-id" class="uk-offcanvas">
        ...
    </div>

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.

## Modifiers

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

### Navbar attached

Add the `.uk-navbar-attached` class to optimize the navbar's styling to be attached to the top of the viewport. For example, rounded corners will be removed.

### Example

### Markup

    <nav class="uk-navbar uk-navbar-attached">...</nav>

## Navbar with dropdowns

A navbar can contain a dropdown from the Dropdown component. Just add the `.uk-dropdown-navbar` modifier to the dropdown, so it fits perfectly into the navbar's styling.

### Example