App Frame

Layout component that provides the structure for an application.

Import#

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

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

AppFrame.Root: The outer container for other app frame elements. It renders children inside a CSS grid layout.
AppFrame.Header: A wrapper for application header.
AppFrame.HeaderSlot: An empty space or slot that header content can “portal” into.
AppFrame.HeaderSlotPortal: A wrapper for a piece of content that will be portaled into HeaderSlot.
AppFrame.Sidebar: A wrapper for the sidebar content such as primary navigation component.
AppFrame.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 by design will fill up full viewport.

See storybook for fullscreen examples

Basic#

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

Without sidebar#

App Frame expects AppFrame.Header, AppFrame.Sidebar and AppFrame.Main as children for the main building blocks. If you just need to define a header and main content for your layout, you can omit rendering AppFrame.Sidebar.

With overflowing content#

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

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

See storybook example

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 exposes AppFrame.HeaderSlot and AppFrame.HeaderSlotPortal that allow you to define app header content wherever your app requires it and render it inside header area using portal technique.

With sidebar navigation#

AppFrame.Sidebar works perfectly in tandem with our Sidebar Navigation component. Example below demonstrates how these components can be used together.

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

With header navigation#

If the sidebar navigation is not suitable for your app, you can host elements such as logo, navigation items and user menu within AppFrame.Header.

Header Nav List component is responsible for rendering navigation lists in the app header.

Visit Header Nav List docs for a more examples and additional instructions.

Accessibility#

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

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

API Reference#

AppFrame.Root#

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

AppFrame.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"`

AppFrame.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

AppFrame.HeaderSlotPortal#

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

AppFrame.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

AppFrame.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