NavigationLayout

<ui5-navigation-layout> | Since 2.4.0

The ui5-navigation-layout is a container component that can be used to create a layout with a header, a side navigation and a content area.

Usage

Use the ui5-navigation-layout to create whole screen of an application with vertical navigation.

Responsive Behavior

On desktop and tablet devices, the side navigation is visible by default and can be expanded or collapsed using the mode property. On phone devices, the side navigation is hidden by default and can be displayed using the mode property.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";

Basic Sample

Properties

mode

Description	Specifies the navigation layout mode.
Type	"Auto" | "Collapsed" | "Expanded"
Default	"Auto"

Slots

header

Description	Defines the header.
Type	Array<HTMLElement>

sideContent

Description	Defines the side content.
Type	Array<SideNavigation>

default

Description	Defines the content.
Type	Array<HTMLElement>

Events

No events available for this component.

Methods

isSideCollapsed

Description	Gets whether the side navigation is collapsed.
Return type	boolean

CSS Parts

No CSS parts available for this component.