# Floating, with sub-menus
> The sections and sub-menus of the Sub-menus layout in a floating sidebar, wider and with more room between the sections.
Source: https://shadleaf.dev/current/layouts/floating-sub-menus/
The [Sub-menus](https://shadleaf.dev/current/layouts/sub-menus.md) layout with `variant="floating"`: on a desktop the sidebar is a panel with a margin all
round, rounded corners (in the vega skin) and a shadow, instead of a column along the edge of the screen. The
application's CSS makes it wider (19 rem), puts more room between the sections and takes the line away from the
sub-menus. The page's header has no border. On a phone the panel is the same as for every
[variant](https://shadleaf.dev/current/components/sidebar.md#variants).
**Example: Floating, with sub-menus.** The same sections and sub-menus in a floating sidebar: a panel with a margin all round, rounded and with a shadow, wider than the default, with more room between the sections and no line along the sub-menus.
For reference: the [shadcn/ui block](https://ui.shadcn.com/blocks/sidebar#sidebar-04) this layout is based on.
## The layout
The whole layout file, with what [every layout needs](https://shadleaf.dev/current/components/application-shell.md#what-every-layout-needs). The
sub-menus have a class of their own, `docs-nav-sub`, for the CSS below.
```html
PageDocumentation
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, as for the [Sub-menus](https://shadleaf.dev/current/layouts/sub-menus.md#a-page)
layout:
```html
Build Your ApplicationData Fetching
...
```
## The CSS
The width is a token: `--sidebar-width` on `.sidebar-provider` replaces the skin's 16 rem, and the floating panel's
footprint follows it. Rules outside a cascade layer, as here, win over Shadleaf's, which are in one.
```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; }
/* A wider sidebar, more room between the sections, the sub-menus without their line. */
.sidebar-provider { --sidebar-width: 19rem; }
.docs-nav { gap: 0.5rem; }
.docs-nav > .sidebar-menu-item > .sidebar-menu-button { font-weight: 500; }
.docs-nav-sub { margin-inline: 0; border-inline-start: 0; padding-inline: 0.375rem; }
/* 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; }
```