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>

Use only inside a .k-sidebar-item

<div class="k-sidebar-item__header">
    Title
</div>
  • 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
Title
Content
<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
Title
Content
<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. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.