App Frame With Sidebar

A foundational layout component that provides the structure for an application, serving as an alternative to the standard header-centric app frame.

Import#

import { AppFrameWithSidebar } from '@volue/wave-react';

App Frame With Sidebar is a compound component that consists of multiple parts to help you create different kinds of layout.

AppFrameWithSidebar.Root: The outer container for other app frame elements. It renders children inside a CSS grid layout.
AppFrameWithSidebar.Header: A wrapper for application header.
AppFrameWithSidebar.HeaderSlot: An empty space or slot that header content can “portal” into.
AppFrameWithSidebar.HeaderSlotPortal: A wrapper for a piece of content that will be portaled into HeaderSlot.
AppFrameWithSidebar.Sidebar: A wrapper for application sidebar that hosts primary navigation component.
AppFrameWithSidebar.Main: A wrapper for main content.

Examples#

Examples below include maxHeight: 50vh CSS rule, to ensure optimal docs-browsing experience. It should not be added in a real app environment, as App Frame With Sidebar by design will fill up full viewport.

See Storybook for fullscreen examples

Basic#

App Frame With Sidebar wraps an entire app view and helps split the viewport into key areas that houses app header, primary sidebar navigation and main content of the page.

Unlike the standard app frame that features a prominent header and typically a top, horizontal navigation bar, this sidebar-focused approach prioritizes vertical navigation hierarchy. The sidebar is designed to be a global, non-contextual element, that stays in place across different application views.

Flexible layout#

App Frame With Sidebar lets you pick and choose its parts to best fit your application requirements. If you just need to define a global sidebar and main content for your layout, you can simply leave out rendering AppFrameWithSidebar.Header.

With overflowing content#

By default AppFrameWithSidebar.Main content will become scrollable as the content overflows. AppFrameWithSidebar.Header and AppFrameWithSidebar.Sidebar are static while scrolling down the content.

It is possible to set scroll prop to body on AppFrameWithSidebar.Root. This will make AppFrameWithSidebar.Main scrollable relative to the viewport.

With sidebar navigation#

AppFrameWithSidebar.Sidebar should be used in combination with our Sidebar Navigation component.

The example below is configured to display a sidebar navigation with a branding, app title, navigation items and a user menu. Because all header elements are consolidated in the sidebar, standard app header at the top can be omitted. This layout is especially effective for map-centric or full-canvas applications where you want to maximize the main view.

Visit Sidebar Navigation docs for a more complete sidebar navigation experience examples and additional instructions.

See example in Storybook

With header#

An optional AppFrameWithSidebar.Header can be added to the app frame to provide a more traditional layout. This is useful for applications that require a more prominent header area for displaying additional information, status and/or actions. This information may be contextual to the current view, such as the name of the view or a set of actions specific to it.

See example in Storybook

Header portal#

Most web apps have persistent root layout with header and navigation sections that are shared across multiple pages/views. Whenever a route changes to any component or view that is within the layout, its state is preserved because the layout component is not unmounted. However, while moving between routes inside the same layout, you may want to contextually change the header contents, such as the name of the view or set of actions specific to it.

App Frame With Sidebar exposes AppFrameWithSidebar.HeaderSlot and AppFrameWithSidebar.HeaderSlotPortal that allow you to define app header content wherever your app requires it and render it inside header area using portal technique.

Accessibility#

By default, AppFrameWithSidebar.Main and AppFrameWithSidebar.Header render semantic HTML tags to mark regions in the app and provide WAI-ARIA landmark roles.

The AppFrameWithSidebar.Sidebar component does not provide a default landmark role, as its content may define its own role. When using SidebarNavigation inside AppFrameWithSidebar.Sidebar an appropriate landmark role will be included with the sidebar component.

API Reference#

AppFrameWithSidebar.Root#

Prop	Type	Default
`css`	`StitchesCss`	No default value
`scroll`	`enum`	`"main"`

AppFrameWithSidebar.Header#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`header`
`css`	`StitchesCss`	No default value
`isSticky`	`boolean`	No default value
`size`	`enum`	`"medium"`

AppFrameWithSidebar.HeaderSlot#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value

AppFrameWithSidebar.HeaderSlotPortal#

Prop	Type	Default
`children`	`React.ReactNode`	No default value

AppFrameWithSidebar.Sidebar#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value

AppFrameWithSidebar.Main#

In addition to the props below, you can pass Box props to control the spacing.

Prop	Type	Default
`as`	`enum`	`main`
`css`	`StitchesCss`	No default value
`background`	`enum`	`"neutralMinimal"`