# Inset with secondary navigation > Sections that are pages of their own with a chevron for their sub-menus, projects, a secondary navigation and the user menu, beside the page as a card. Source: https://shadleaf.dev/current/layouts/inset-secondary-navigation/ A sidebar whose sections are pages of their own: the section's name is a link, and a chevron beside it opens and closes its pages in a [collapsible sub-menu](https://shadleaf.dev/current/components/sidebar.md#a-section-that-is-a-page-too). The server opens the current page's section. Below them the projects, each with a "More" menu, and at the bottom of the content a secondary navigation (Support, Feedback) in small buttons. The footer holds the [user menu](https://shadleaf.dev/current/components/user-menu.md). The page is a card beside the sidebar (`variant="inset"`), and its header has the trigger, the [breadcrumb](https://shadleaf.dev/current/components/breadcrumb.md) and the theme toggle. 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: Inset with secondary navigation.** Sections that are pages of their own, with a chevron beside each that opens its sub-menu, projects with a menu each, a secondary navigation at the bottom and the signed-in user's menu, and the page as a card beside it. For reference: the [shadcn/ui block](https://ui.shadcn.com/blocks/sidebar#sidebar-08) this layout is based on. ## 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. The chevrons are `summary` elements and need a name each (`aria-label`), as an icon button does: "Playground's pages". ```html Page Acme Inc Enterprise Platform Playground History Starred Settings Models Genesis Explorer Quantum Documentation Introduction Get Started Tutorials Changelog Settings General Team Billing Limits Projects Design Engineering View project Share project Delete project Sales & Marketing View project Share project Delete project Travel View project Share project Delete project More Support Feedback Upgrade to Pro Account Billing Notifications

``` ## 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 Playground History
...
``` ## 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 secondary navigation pushed to the bottom of the content (the `nav-secondary` class on its group), 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 secondary navigation at the bottom of the sidebar's content. */ .nav-secondary { margin-block-start: auto; } /* The page's padding: the header above it has its own. */ .page { padding: 0 1rem 1rem; } .page > h1 { margin-block-end: 1rem; font-size: 1.5rem; font-weight: 600; } ```