Skip to content

SideBar

Ivan Kalatchev edited this page Nov 4, 2020 · 3 revisions

The SideBar is (not) a HTML component, that presents a menu.

SideBar-Expanded

How to use it?

Example Code

Normal sidebar

<div id="wrapper">

<!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                MyCompany
            </a>
        </li>
        <li>
            <a href="#">Shortcuts</a>
        </li>
        <li>
            <a href="#">Shortcuts</a>
        </li>
        <li>
            <a href="#" class="active">Overview</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</div>

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <button class="btn btn-outline-dark be-nav-fake">

           <span class="iconify" data-icon="radix-icons:hamburger-menu" data-inline="false"></span>

        </button>
    </a>
</nav>

.
. Content
.

</div>

Classes

be-nav-fake - button that open and closes the sidebar

sidebar-brand active sidebar-nav

Id-s

wrapper sidebar-wrapper

Clone this wiki locally