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.AppBar: A wrapper for navigation across different apps or modules within the same app.
AppFrame.Sidebar: A wrapper for sidebar content such as primary navigation.
AppFrame.NavBar: A wrapper for primary navigation that sits between the header and main content. An alternative to AppFrame.Sidebar.
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 key areas that houses app header, primary navigation and main content of the page.

Flexible layout#

App Frame lets you pick and choose its parts to best fit your application requirements. If you just need to define a header and main content for your layout, you can simply leave out rendering AppFrame.Sidebar or AppFrame.NavBar.

With overflowing content#

By default AppFrame.Main content will become scrollable as the content overflows. AppFrame.Header, AppFrame.Sidebar or AppFrame.NavBar 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 nav bar#

If the sidebar navigation is not suitable for your app, use AppFrame.NavBar in tandem with Nav Bar component to display primary navigation items.

Elements such as logo, user profile, settings and/or user manual links should be placed within AppFrame.Header. To render header actions, you can use the Header Nav List component.

Visit Nav Bar docs for more in-depth examples and additional instructions.

With app bar#

If you need to display a navigation bar across different apps or core modules within the same app, use AppFrame.AppBar in tandem with App Bar component.

Visit App Bar docs for more in-depth 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

```