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 remains visible and can be expanded or collapsed using the sideCollapsed property. On phone devices, the side navigation is hidden by default but can be displayed using the same sideCollapsed property.

ES6 Module Import

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

Basic Sample

Properties

sideCollapsed

Description	Indicates whether the side navigation is collapsed.
Type	boolean
Default	false

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

No methods available for this component.

CSS Parts

No CSS parts available for this component.