Get boba!
boba Version 1.7.2

Sidebar

Get the CSS-only sidebar used here on our documentation pages!

Tip

Comments have been added to the code snippet to better explain the many sections of our sidebar-layout component!

Make sure the href on the sb-side-navbar-toggle matches the id of the sb-side-navbar!

<!-- Declare the sidebar layout-->
<div class="sidebar-layout">
    <!-- The top navbar only appears on smaller viewports -->
    <div class="sb-top-navbar sticky">
        <!-- The hamburger menu that toggles the sidebar on smaller viewports -->
        <a class="sb-side-navbar-toggle" href="#boba-sidebar">
            <span class="sb-menu-icon"></span>
        </a>

        <!-- You can add other content to the top navbar -->
        <a class="button orange" href="#">Button</a>
    </div>

    <!-- The sidebar component itself -->
    <div class="sb-side-navbar" id="boba-sidebar">
        <div class="sb-side-sticky-region">
            <!-- Content in this section will stay fixed to the top of the sidebar --> 

            <!-- For example, add your logo here --> 
            <a href="#">Your Logo Here</a>
        </div>
        <div class="sb-side-scroll-region">
            <!-- Content in this section will be scrollable when the sidebar gets long enough --> 

            <!-- A basic menu using accordions --> 
            <div class="accordion-menu">
                <input type="checkbox" id="overview" name="accordion-checkbox"/>
                <label class="accordion-header" for="overview">
                    Menu Header
                </label>
                <div class="accordion-body">
                    <ul class="accordion-submenu">
                        <li><a href="#">Menu Item 1</a></li>
                        <li><a href="#">Menu Item 2</a></li>
                        <li><a href="#">Menu Item 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- The overlay over the main content that is displayed when the sidebar is visible on smaller viewports -->        
    <a class="sb-main-overlay" href="#close"></a>

    <!-- The main content container of your page, adjusted to accommodate the sidebar -->
    <div class="sb-main-content">
        <!-- Add your main page content here -->

        <!-- This is how we format our main content -->
        <div class="section">
            <div class="container">
                <!-- Your content goes here -->
            </div>
        </div>
    </div>
</div>

Components

An in-depth discussion on the various components of the sidebar.

Top Navbar

Use the sb-top-navbar section to have a top navbar appear on smaller viewports that contains a toggle for the sidebar.

Option

Add the .sticky class to your sb-top-navbar to have the navbar stick to the top of the page. The navbar will be treated as position: relative; until the user scrolls down the page at which point it will behave as position: fixed;.

Alternatively, add the .fixed class to your sb-top-navbar to have the navbar fixed to the top of the page. A fixed navbar sits on top of the normal page content. Be sure to account for this!

Sticky
<!-- The top navbar only appears on smaller viewports -->
<div class="sb-top-navbar sticky">
    <!-- The hamburger menu that toggles the sidebar on smaller viewports -->
    <a class="sb-side-navbar-toggle" href="#boba-sidebar">
        <span class="sb-menu-icon"></span>
    </a>

    <!-- You can add other content to the top navbar -->
    <a class="button orange" href="#">Button</a>
</div>
Fixed
<!-- The top navbar only appears on smaller viewports -->
<div class="sb-top-navbar fixed">
    <!-- The hamburger menu that toggles the sidebar on smaller viewports -->
    <a class="sb-side-navbar-toggle" href="#boba-sidebar">
        <span class="sb-menu-icon"></span>
    </a>

    <!-- You can add other content to the top navbar -->
    <a class="button orange" href="#">Button</a>
</div>

Sticky Region

Use the sb-side-sticky-region container to stick content to the top of the sidebar.

Clarification

This section must be used within the sb-side-navbar section of the sidebar.

When the sidebar content exceeds the page height, content within this region will stay fixed to the top of the sidebar.

<!-- Content in this section will stay fixed to the top of the sidebar --> 
<div class="sb-side-sticky-region">
    <!-- For example, add your logo here --> 
    <a href="#">Your Logo Here</a>
</div>

Scroll Region

Use the sb-side-scroll-region container to stick content to the top of the sidebar.

Clarification

This section must be used within the sb-side-navbar section of the sidebar.

When the sidebar content exceeds the page height, content within this region will be scrollable.

<!-- Content in this section will be scrollable when the sidebar gets long enough --> 
<div class="sb-side-scroll-region">
    <!-- A basic menu using accordions --> 
    <div class="accordion-menu">
        <input type="checkbox" id="overview" name="accordion-checkbox"/>
        <label class="accordion-header" for="overview">
            Menu Header
        </label>
        <div class="accordion-body">
            <ul class="accordion-submenu">
                <li><a href="#">Menu Item 1</a></li>
                <li><a href="#">Menu Item 2</a></li>
                <li><a href="#">Menu Item 3</a></li>
            </ul>
        </div>
    </div>
</div>

Main Content

The sb-main-content container is offset perfectly so that your main content leaves space for the sidebar.
<!-- Add your main page content in this section -->
<div class="sb-main-content">    
    <!-- This is how we format our main content -->
    <div class="section">
        <div class="container">
            <!-- Your content goes here -->
        </div>
    </div>
</div>