# Sub-menus > A sidebar of sections with their pages in sub-menus that are always open, as documentation has. Source: https://shadleaf.dev/current/layouts/sub-menus/ A sidebar for an application whose pages fall into a handful of sections, such as documentation: each section is a link of its own with its pages in a [sub-menu](https://shadleaf.dev/current/components/sidebar.md#collapsible-groups) below it, always open, so the whole structure is in view. The application's name and version are at the top. The page's header has the trigger and the [breadcrumb](https://shadleaf.dev/current/components/breadcrumb.md). 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: Sub-menus.** A sidebar of sections, each with its pages in a sub-menu that is always open, as in documentation. The current page is a sub-button; 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-03) this layout is based on. The [floating variant](https://shadleaf.dev/current/layouts/floating-sub-menus.md) has the same menus in a panel with a margin round it. ## 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. `#slNav.current` marks the current page from the request: the sections compare the exact path (`true`), so a section is not marked as well when one of its pages is shown. ```html Page Documentation v1.0.0 Getting Started Installation Project Structure Build Your Application Routing Data Fetching Rendering Caching Styling API Reference Components File Conventions Functions Architecture Accessibility Fast Refresh 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 weight of the sections' links (the `docs-nav` class on the menu), 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 sections' links in a medium weight, their pages' in the normal one. */ .docs-nav > .sidebar-menu-item > .sidebar-menu-button { font-weight: 500; } /* 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; } ```