# Boomerang UI Kit

## Navbar

Documentation and examples for responsive navigation header. Includes support for branding, navigation, and more, including support for the collapse plugin.

Open Bootstrap Docs

### Example

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
        <a class="navbar-brand" href="#">Boomerang</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_example_1" aria-controls="navbar_example_1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar_example_1">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbar_1_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                    <div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link nav-link-icon" href="#"><i class="fas fa-cogs"></i></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-icon" href="#" id="navbar_1_dropdown_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-bell"></i></a>
                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-xl py-0">
                        <div class="py-3 px-3">
                            <h5 class="heading h6 mb-0">Notifications</h5>
                        </div>
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                    <span class="avatar bg-purple">JD</span>
                                </div>
                                <div class="list-group-content">
                                    <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                                    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                    <span class="avatar bg-pink">TC</span>
                                </div>
                                <div class="list-group-content">
                                    <div class="list-group-heading">Tom Cruise <small>10:05 PM</small></div>
                                    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                                <div class="list-group-img">
                                    <span class="avatar bg-blue">WS</span>
                                </div>
                                <div class="list-group-content">
                                    <div class="list-group-heading">Will Smith <small>10:05 PM</small></div>
                                    <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                                </div>
                            </a>
                        </div>
                        <div class="py-3 text-center">
                            <a href="#" class="link link-sm link--style-3">View all notifications</a>
                        </div>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-icon" href="#" id="navbar_1_dropdown_3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i></a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <h6 class="dropdown-header">User menu</h6>
                        <a class="dropdown-item" href="#">
                            <span class="float-right badge badge-primary">4</span>
                            <i class="fas fa-envelope text-primary"></i>Messages
                        </a>
                        <a class="dropdown-item" href="#">
                            <i class="fas fa-cog text-primary"></i>Settings
                        </a>
                        <div class="dropdown-divider" role="presentation"></div>
                        <a class="dropdown-item" href="#">
                            <i class="fas fa-sign-out-alt text-primary"></i>Sign out
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

### Variations

###### Additional Class Reference

`.navbar-light`
  Apply to `.navbar` for use with light background colors

`.navbar-dark`
  Apply to `.navbar` for use with dark background colors

`.bg-{color}`
  Apply to `.navbar` to change its background color