Frame

The frame component, while not visible in the user interface itself, provides the structure for an application. It wraps the main elements and houses the primary navigation, top bar, toast, and contextual save bar components.

Examples

Use to present the frame structure and all of its elements.

Drag to resize example

Props

children
React.ReactNode
The content to display inside the frame.
globalRibbon
React.ReactNode
Accepts a global ribbon component that will be rendered fixed to the bottom of an application frame
navigation
React.ReactNode
Accepts a navigation component that will be rendered in the left sidebar of an application frame
offset
string
A horizontal offset that pushes the frame to the right, leaving empty space on the left
showMobileNavigation
boolean
A boolean property indicating whether the mobile navigation is currently visible
skipToContentTarget
React.RefObject
Accepts a ref to the html anchor element you wish to focus when clicking the skip to content link
topBar
React.ReactNode
Accepts a top bar component that will be rendered at the top-most portion of an application frame
onNavigationDismiss
() => void
A callback function to handle clicking the mobile navigation dismiss button

Best practices

For the best experience when creating an application frame, use the following components:

Edit source on GitHub