Skip to content

Sidebar item

Adds bottom spacing when multiple sidebar items are being used
Adds flexbox styling
Hidden on small screens
Add .k-sidebar-item--flex to the sidebar items that need to grow with the layout
Use only inside a .k-sidebar
If you are unsure how to use this just copy paste complete templates from the list examples or the form examples page

<div class="k-sidebar-item default">
    ...
</div>
<div class="k-sidebar-item k-sidebar-item--flex">
    ...
</div>
<div class="k-sidebar-item k-sidebar-item--toggle k-js-sidebar-toggle-item">
    ...
</div>

Sidebar item header

Use only inside a .k-sidebar-item

<div class="k-sidebar-item__header">
    Title
</div>

Sidebar item content

Adds spacing
Use only inside a .k-sidebar-item

<div class="k-sidebar-item__content default">
    Content
</div>
<div class="k-sidebar-item__content k-sidebar-item__content--small">
    Content
</div>

Complete sidebar item

A complete sidebar item may look like this

Hidden on small screens

<div class="k-sidebar-item">
    <div class="k-sidebar-item__header">
        Title
    </div>
    <div class="k-sidebar-item__content">
        Content
    </div>
</div>

Example

Example inside an actual sidebar

Hidden on small screens

<div class="k-sidebar-left k-js-sidebar-left">
    <div class="k-sidebar-item">
        <div class="k-sidebar-item__header">
            Title
        </div>
        <div class="k-sidebar-item__content">
            Content
        </div>
    </div>
</div>

Need Help? Let our developers personally assist you. Business or Agency subscribers can ask development related questions in our Support Center.