roobie/docs/components/navbar.md

A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.

# Navbar
Navigation bars of all shapes and sizes.  Requires JS.

## Horizontal
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </div>
    <div class="row">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-row jst-around aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
    </div>
    <div class="row aln-center rsp-menu-xl">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">About Us</a>
        <a class="nav-item">Contact Us</a>
        <a class="nav-item">Help</a>
    </div>
    <div class="row">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-row jst-around aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu-l">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </div>
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
        </div>
    </div>
    <input type="text" class="input input-outline" placeholder="Search">
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
        </div>
    </div>
    <input type="text" class="input input-outline input-expand" placeholder="Search with expand">
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <a class="nav-title" href="">Roobie</a>
    <div class="row aln-center rsp-menu-s">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">Help</a>
    </div>
</nav>

```html
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </div>
    <div class="row">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-row jst-around aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
    </div>
    <div class="row aln-center rsp-menu-xl">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">About Us</a>
        <a class="nav-item">Contact Us</a>
        <a class="nav-item">Help</a>
    </div>
    <div class="row">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-row jst-around aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu-l">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </div>
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
        </div>
    </div>
    <input type="text" class="input input-outline" placeholder="Search">
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <div class="row aln-center">
        <a class="nav-title" href="">Roobie</a>
        <div class="row aln-center rsp-menu">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
        </div>
    </div>
    <input type="text" class="input input-outline input-expand" placeholder="Search with expand">
</nav>
<nav class="nav-row jst-between aln-center bdr1">
    <a class="nav-title" href="">Roobie</a>
    <div class="row aln-center rsp-menu-s">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">Help</a>
    </div>
</nav>
```

## Vertical
<div class="row aln-center">
    <nav class="nav-col jst-between aln-center bdr1 txtc">
        <div class="col">
            <a class="nav-title" href="">Roobie</a>
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
        <div class="col aln-center">
            <a class="nav-item">user@roobie.net</a>
        </div>
    </nav>
    <nav class="nav-col jst-between aln-center bdr1 txtc">
        <a class="nav-title" href="">Roobie</a>
        <div class="col">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </nav>
    <nav class="nav-col jst-between aln-center bdr1 txtc">
        <a class="nav-title" href="">Roobie</a>
        <div class="col">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
        <div class="col aln-center">
            <a class="nav-item">user@roobie.net</a>
        </div>
    </nav>
    <nav class="nav-col aln-center bdr1">
        <a class="nav-item"><i class="icon icon-apps"></i></a>
        <a class="nav-item"><i class="icon icon-linkedin"></i></a>
        <a class="nav-item"><i class="icon icon-facebook"></i></a>
        <a class="nav-item"><i class="icon icon-bell"></i></a>
    </nav>
    <nav class="nav-col aln-center bdr1 txtc">
        <div class="div">
            <h4 class="nav-heading">Section 1</h4>
            <div class="col aln-center">
                <a class="nav-item">Home</a>
                <a class="nav-item">Products</a>
            </div>
        </div>
        <div class="div">
            <h4 class="nav-heading">Section 2</h4>
            <div class="col aln-center">
                <a class="nav-item">About Us</a>
                <a class="nav-item">Contact Us</a>
                <a class="nav-item">Help</a>
            </div>
        </div>
    </nav>
</div>

```html
<nav class="nav-col jst-between aln-center bdr1 txtc">
    <div class="col">
        <a class="nav-title" href="">Roobie</a>
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">About Us</a>
        <a class="nav-item">Contact Us</a>
        <a class="nav-item">Help</a>
    </div>
    <div class="col aln-center">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-col jst-between aln-center bdr1 txtc">
    <a class="nav-title" href="">Roobie</a>
    <div class="col">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">About Us</a>
        <a class="nav-item">Contact Us</a>
        <a class="nav-item">Help</a>
    </div>
</nav>
<nav class="nav-col jst-between aln-center bdr1 txtc">
    <a class="nav-title" href="">Roobie</a>
    <div class="col">
        <a class="nav-item">Home</a>
        <a class="nav-item">Products</a>
        <a class="nav-item">About Us</a>
        <a class="nav-item">Contact Us</a>
        <a class="nav-item">Help</a>
    </div>
    <div class="col aln-center">
        <a class="nav-item">user@roobie.net</a>
    </div>
</nav>
<nav class="nav-col aln-center bdr1">
    <a class="nav-item"><i class="icon icon-apps"></i></a>
    <a class="nav-item"><i class="icon icon-linkedin"></i></a>
    <a class="nav-item"><i class="icon icon-facebook"></i></a>
    <a class="nav-item"><i class="icon icon-bell"></i></a>
</nav>
<nav class="nav-col aln-center bdr1 txtc">
    <div class="div">
        <h4 class="nav-heading">Section 1</h4>
        <div class="col aln-center">
            <a class="nav-item">Home</a>
            <a class="nav-item">Products</a>
        </div>
    </div>
    <div class="div">
        <h4 class="nav-heading">Section 2</h4>
        <div class="col aln-center">
            <a class="nav-item">About Us</a>
            <a class="nav-item">Contact Us</a>
            <a class="nav-item">Help</a>
        </div>
    </div>
</nav>
```

## Check for Navbars
To check for Navbars and create dynamic content.  Useful in SPA frameworks, not required for MPA most of the time.  Roobie checks for Navbars on initial page load, but if the Navbar is loaded after you must explicitly check for it be found and work properly.

### TypeScript
To use the Navbar class in TypeScript you must declare it.
```ts
declare var Navbar;
```

### Check Function
```js
Navbar.check();
```

### HTML
To use HTML to check for Navbars, add an `iframe` to the bottom of your HTML where the Navbar resides.
```html
<iframe class="hide" onload="Navbar.check()"></iframe>
```
<iframe class="hide" onload="Navbar.check()"></iframe>