Page

# Collapsible sub-menus > A sidebar of sections that open and close, each with its pages in a sub-menu, only the current page's section open. Source: https://shadleaf.dev/current/layouts/collapsible-sub-menus/ The [sub-menus layout](https://shadleaf.dev/current/layouts/sub-menus.md) for more pages than fit in view: every section is a [collapsible item](https://shadleaf.dev/current/components/sidebar.md#collapsible-groups) that opens and closes its sub-menu, and the server opens only the section that holds the current page (`th:open="${#slNav.current('/build')}"`). The sections are no pages of their own: the whole row opens and closes. At the top, the application's name and version and a search field. On a desktop the trigger moves the sidebar out of view; on a phone it opens the same sidebar as a panel. Switch the preview to Phone to see it. **Example: Collapsible sub-menus.** A sidebar of sections that open and close, each with its pages in a sub-menu; only the current page's section is open. The trigger moves the sidebar out of view on a desktop and opens it as a panel on a phone. For reference: the [shadcn/ui block](https://ui.shadcn.com/blocks/sidebar#sidebar-05) this layout is based on. Its plus and minus are Shadleaf's turning chevron here. ## The layout The whole layout file. It has what [every layout needs](https://shadleaf.dev/current/components/application-shell.md#what-every-layout-needs): the theme script and Shadleaf's assets in the head, the skip link first, one `main` (``), the page's title, and the toaster. ```html Page

Documentation v1.0.0

Getting Started

Installation

Project Structure

Build Your Application

Routing

Data Fetching

Rendering

Caching

Styling

Optimizing

Configuring

Testing

Authentication

Deploying

Upgrading

Examples

API Reference

Components

File Conventions

Functions

Configuration Options

CLI

Edge Runtime

Architecture

Accessibility

Fast Refresh

Compiler

Supported Browsers

Bundler

Community

Contribution Guide

``` ## A page A page passes its title, its breadcrumb's levels and its content. The levels are a `th:block` with `th:ref`, so nothing of it is rendered where it stands; the layout puts them in its ``. ```html

Build Your Application

Data Fetching

...

``` ## The CSS Shadleaf's CSS styles the components, not the page around them, and has no utility classes. The rest is the application's CSS, here without Tailwind: the square behind the logo, the magnifier in the search field, a border below the header, and the page's padding. ```css /* The square behind the logo in the sidebar's header. */ .app-logo { display: grid; place-items: center; flex-shrink: 0; inline-size: 2rem; block-size: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); } .app-logo > svg { inline-size: 1rem; block-size: 1rem; } /* The search field: a magnifier inside it, at the start. */ .docs-search { position: relative; } .docs-search > .input { block-size: 2rem; padding-inline-start: 2rem; background: var(--background); } .docs-search > svg { position: absolute; inset-inline-start: 0.5rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1rem; block-size: 1rem; opacity: 0.5; pointer-events: none; } /* A border below the page's header, and the page's padding. */ .sidebar-inset > .site-header { border-block-end: 1px solid var(--border); } .page { padding: 1rem; } .page > h1 { margin-block-end: 1rem; font-size: 1.5rem; font-weight: 600; } ```