Component documentation

Basics

Components

Objects

Utilities

A navbar is a container element that typically holds an toolbar. Navbars can be combined and can be placed top or bottom of the screen.

Navbar top

<div style="margin-bottom: 150px;">
    <div class="c-navbar">
        <div class="c-toolbar">
            <div class="c-toolbar__left">
                <div class="c-toolbar__item">
                    <h2 class="c-toolbar__title">Toolbar title</h2>
                </div>
            </div>
            <div class="c-toolbar__right">
                <div class="c-toolbar__item">
                    <div class="c-button-toolbar">
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-add  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span class="c-button__label">Button label</span>
                            </span>
                        </button>
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span class="c-button__label">Button label</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

div(style="margin-bottom: 150px;")
    .c-navbar
        .c-toolbar
            .c-toolbar__left
                .c-toolbar__item
                    h2.c-toolbar__title Toolbar title
            .c-toolbar__right
                .c-toolbar__item
                    .c-button-toolbar
                        +c-button({ icon: 'add' }) Button label
                        +c-button({ icon: 'edit' }) Button label

Navbar bottom

<div style="margin-top: 120px;">
    <div class="c-navbar c-navbar--bordered-top">
        <div class="c-toolbar">
            <div class="c-toolbar__left">
                <div class="c-toolbar__item">
                    <h2 class="c-toolbar__title">Toolbar title</h2>
                </div>
            </div>
            <div class="c-toolbar__right">
                <div class="c-toolbar__item">
                    <div class="c-button-toolbar">
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-add  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span class="c-button__label">Button label</span>
                            </span>
                        </button>
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <div class="o-svg-icon o-svg-icon-edit  ">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
                                    </svg>
                                </div>
                                <span class="c-button__label">Button label</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

div(style="margin-top: 120px;")
    .c-navbar.c-navbar--bordered-top
        .c-toolbar
            .c-toolbar__left
                .c-toolbar__item
                    h2.c-toolbar__title Toolbar title
            .c-toolbar__right
                .c-toolbar__item
                    .c-button-toolbar
                        +c-button({ icon: 'add' }) Button label
                        +c-button({ icon: 'edit' }) Button label

Navbar tabs

<div class="c-navbar c-navbar--small">
    <div class="c-toolbar c-toolbar--small">
        <div class="c-toolbar__left">
            <nav class="c-tabs">
                <ul>
                    <li>
                        <a class="c-tabs__item" href="#" aria-selected="true">Item</a>
                    </li>
                    <li>
                        <a class="c-tabs__item" href="#">Item</a>
                    </li>
                    <li>
                        <a class="c-tabs__item" href="#">Item</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

.c-navbar.c-navbar--small
    .c-toolbar.c-toolbar--small
        .c-toolbar__left
            nav.c-tabs
                ul
                    li
                        a.c-tabs__item(href='#' aria-selected="true") Item
                    li
                        a.c-tabs__item(href='#') Item
                    li
                        a.c-tabs__item(href='#') Item