Uihub

Appearance

Sidebar ​

Usage ​

See design usage guidelines

The sidebar is a vertical navigation panel positioned on the left side of the screen, designed to provide users with quick and intuitive access to various sections of an application.

Sidebar example

html
<div class="layout dashboard">
  <aside>
    <div class="sidebar">
        <section class="flex">
            <img src="https://greyparrot.io/images/logo.png" alt="Grey Parrot IO">
        </section>
        <section data-navigation>
            <header>OVERVIEW</header>
            <ul>
                <li tabindex="0">
                    <a href="#" class="flex">
                        Navigation Item
                        <span class="badge badge-warning badge-small">99+</span>
                    </a>
                </li>
                <li tabindex="0">
                    <a href="#" class="flex active">
                        Navigation Item
                        <span class="badge badge-warning badge-small">99+</span>
                    </a>
                </li>
                <li tabindex="0" opened="false">
                    <a href="#">Navigation Item</a>
                    <ul>
                        <li tabindex="0"><a href="#">Service 1</a></li>
                        <li tabindex="0"><a href="/about.html">Service 2</a></li>
                        <li tabindex="0" opened="false">
                            <a href="#">Service 3</a>
                            <ul>
                                <li tabindex="0"><a href="#">Service 1</a></li>
                                <li tabindex="0"><a href="/about.html">Service 2</a></li>
                                <li tabindex="0"><a href="#">Service 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li tabindex="0">
            </ul>
            <br><br>
            <header>MANAGEMENT</header>
            <ul>
                <li tabindex="0">
                    <a href="#" class="flex">
                        Navigation Item
                        <span class="badge badge-warning badge-small">99+</span>
                    </a>
                </li>
                <li tabindex="0">
                    <a href="#" class="flex">
                        Navigation Item
                        <span class="badge badge-warning badge-small">99+</span>
                    </a>
                </li>
                <li tabindex="0" opened="false">
                    <a href="#">Navigation Item</a>
                    <ul>
                        <li tabindex="0"><a href="#">Service 1</a></li>
                        <li tabindex="0"><a href="/about.html">Service 2</a></li>
                        <li tabindex="0" opened="false">
                            <a href="#">Service 3</a>
                            <ul>
                                <li tabindex="0">
                                    <a href="#" class="flex">
                                        Navigation Item
                                        <span class="badge badge-warning badge-small">99+</span>
                                    </a>
                                </li>
                                <li tabindex="0"><a href="/about.html">Service 2</a></li>
                                <li tabindex="0"><a href="#">Service 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li tabindex="0">
            </ul>
        </section>
        <section>
        </section>
    </div>
  </aside>
  <main title="Main Body"></main>
</div>

Customisation ​

css
.sidebar {
  --sidebar-height: 100vh;
  --sidebar-row-heights: 200px 1fr 100px;
  --sidebar-background-color: var(--primary-darker);
  --sidebar-default-link-text-color: #b6b4b4;
  --sidebar-text-color: #cccccc;
  --sidebar-link-header-text-color: #cccccc;
  --sidebar-link-disabled: #BCBCBC;
  --sidebar-link-badge-disabled: #272727;
  --sidebar-link-hover-bg-color: #D9E8FD;
  --sidebar-link-hover-text-color: #707070;
  --sidebar-link-active-bg-color: #fff;
  --sidebar-link-active-text-color: var(--primary-normal);
  --sidebar-link-padding: 0.75rem 2rem;
}

Usage Guidelines ​