App Frame

A foundational 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.AppHeader: A wrapper for application header.
AppFrame.AppBar: A wrapper for navigation across different apps or modules within the same app.
AppFrame.NavBar: A wrapper for primary navigation that sits between the header and main content.
AppFrame.Sidebar: A wrapper for sidebar content that appears alongside the main content, such as primary or secondary (contextual) navigation, content filters etc.
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/secondary 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, AppFrame.NavBar or AppFrame.AppBar.

With overflowing content#

By default AppFrame.Main content will become scrollable as the content overflows. AppFrame.AppHeader, 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.Main scrollable relative to the viewport.

See example in Storybook

With nav bar#

AppFrame.NavBar should be used in tandem with Nav Bar component to display primary navigation items. This navigation experience is best suited for applications with a limited number of top-level views, typically less than 7.

Elements such as logo, user profile, settings and/or user manual links should be placed within AppFrame.AppHeader by using the App Header component.

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

See example in Storybook

With sidebar navigation#

AppFrame.Sidebar integrates seamlessly with our Sidebar Navigation component. Example below demonstrates how these components can be used together to create a more complex primary navigation structure with numerous items, extending beyond the capabilities of the Nav Bar.

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

See example in Storybook

With app bar#

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

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

See example in Storybook

Accessibility#

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

The AppFrame.Sidebar, AppFrame.NavBar, and AppFrame.AppBar components do not provide a default landmark role, as their content may define its own role.

For example, when you use SidebarNavigation within AppFrame.Sidebar or NavBar within AppFrame.NavBar, the appropriate landmark role is included by the navigation component itself.