App Frame

The App Frame component provides page structure and integrates with other navigation components.

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
children
node
sidenav
node | ({ visible }) => node
Area to display secondary navigation
sidenavOpen
boolean
Control if the sidenav container is opened
onRequestSideNavClose
Event => ()
Callback triggered when the sidenav should be closed. Use if controlling the open state
onRequestSideNavOpen
Event => ()
Callback triggered when the sidenav should be opened. Use if controlling the open state
topnav
node | ({ closeSidenav, openSidenav, sidenavOpen }) => node
Area to display primary navigation - such as a NavBar

If needed, you can control the the sidenav open state.

This reference implementation of the Skills nav is available on codesandbox.


Open an issue