Uihub

Appearance

Topbar ​

Usage ​

See design usage guidelines


Topbar provides quick access to important features and content

Topbar ​

Topnav Example


Add separator to show bars in between each nav item. And of course remove if from individual li's with no-separator class

html
<nav class="navbar sticky">
    <ul>
        <li class="no-separator">
            <a href="javascript:void(0);">
                <div class="badge-container">
                    <span class="u-icon u-icon-24 text-grey-normal">o-bell</span>
                    <span class="badge badge-small" style="--margin-left: -10px; --margin-top: 0px;">+99</span>
                </div>
            </a>
            <ul>
                <li class="border-bottom">
                    <div class="text-center flex flex-center gap-2">
                        <span class="u-icon u-icon-24 text-primary-normal">bell</span>
                        <p>Notifications</p>
                        <span class="badge">99+</span>
                    </div>
                </li>
                <li>
                    <div>
                        <p class="text-bold mb-1 text-grey-dark">Activity</p>
                        <p class="text-grey-normal">30 mins ago</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p class="text-bold mb-1 text-grey-dark">Activity</p>
                        <p class="text-grey-normal">30 mins ago</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p class="text-bold mb-1 text-grey-dark">Activity</p>
                        <p class="text-grey-normal">30 mins ago</p>
                    </div>
                </li>
                <li class="border-bottom">
                    <div>
                        <p class="text-bold mb-1 text-grey-dark">Activity</p>
                        <p class="text-grey-normal">30 mins ago</p>
                    </div>
                </li>
                <li>
                    <a href="#" class="text-bold text-center m-3 text-primary-normal">See all Activities</a>
                </li>
            </ul>
        </li>
        <li><span>User Role</span></li>
        <li><span>Profile Name</span></li>
        <li>
            <a href="javascript:void(0);" class="flex gap-4px">
                <span class="u-icon u-icon-24 text-primary-normal">user</span>
                <span class="u-icon text-primary-normal">o-chevron-down</span>
            </a>
            <ul>
                <li class="border-bottom">
                    <div data-layout="col: max-content 1fr" class="gap-1 align-center">
                        <span class="u-icon u-icon-48 text-primary-normal">user</span>
                        <div>
                            <span class="text-bold">Profile Name</span>
                            <p>User Role</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div data-layout="col: max-content 1fr" class="gap-3 align-center pointer">
                        <span class="u-icon u-icon-24 text-error-normal">o-sign-out</span>
                        <span class="text-bold text-error-normal">Logout</span>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Customisation ​

css
nav.navbar {
    --navbar-background-color: #fff;
    --navbar-z-index: 10;
    --navbar-height: 65px;
    --navbar-separator-height: 30px;
    --navbar-separator-color: #d3d2d2;
    --navbar-title-color: #707070ad;
    --navbar-border: 1px solid #d3d2d2;
    --navbar-text-color: var(--default-text-color);
}

Usage Guidelines ​