Tailwind Jun Layout
Documentation

Getting Started

Configuration

Integration

Examples

Docs
Inset Sidebar

Inset Sidebar

Utilities for building the inset sidebar of the layout

Usage

An inset sidebar is a complimentary sidebar within the Content of the layout. It requires a structure of:

  • jun-insetSidebar: the sidebar container
    • jun-insetContent: the sidebar body
<aside className="jun-insetSidebar">
  <div className="jun-insetContent">Table of contents...</div>
</aside>

The default inset sidebar will stick to the page when scrolling the content until reached the end of the content.


Controlling width

Use jun-insetSidebar-w-[*] to customize the width of the sidebar:

<aside className="jun-insetSidebar jun-insetSidebar-w-[220px] lg:jun-insetSidebar-w-[240px]">
  <div className="jun-insetContent">Table of contents...</div>
</aside>
Header

Standalone sidebar

If you are building a standalone app like a chat app and need a sidebar within the Content, use jun-insetSidebar-absolute:

<aside className="jun-insetSidebar jun-insetSidebar-absolute">
  <div className="jun-insetContent">Table of contents...</div>
</aside>

The height of the sidebar span below header to the bottom of the page (overlap the footer), so if the Footer is used you need to add jun-insetAvoidingView as a child of the footer.

<div className="jun-layout jun-layout-standalone">
  <main className="jun-content">
    <div>...</div>
    <aside className="jun-insetSidebar jun-insetSidebar-absolute">
      <div className="jun-insetContent">Table of contents...</div>
    </aside>
  </main>
  <footer className="jun-footer">
    <div className="jun-insetAvoidingView">...</div>
  </footer>
</div>
Header
Table of Contents
1. Section 12. Section 23. Section 34. Section 45. Section 56. Section 67. Section 78. Section 89. Section 910. Section 1011. Section 1112. Section 1213. Section 1314. Section 1415. Section 1516. Section 1617. Section 1718. Section 1819. Section 1920. Section 20

API

ClassDescription
jun-insetSidebarThe root container for the inset sidebar (Required)
jun-insetContentThe content container of the inset sidebar (Required)
jun-insetSidebar-w-[*]Sets the width of the inset sidebar
jun-insetSidebar-stickyThe default behavior of the inset sidebar. The content stick under the header when scroll until it reached the end of the content
jun-insetSidebar-fixedSimilar to the sticky behavior but the fixed inset sidebar will never flow when it reached the end of the content. It always stick to the page.
jun-insetSidebar-absoluteMakes the sidebar span from header to bottom of the page, useful for standalone apps
jun-insetAvoidingViewUsed within footer to prevent overlap with absolute inset sidebar
Edge SidebarSidebar elements