Docs

Docs

App Layout

App Layout is a component for building common application layouts.

App Layout is a component for building common application layouts.

Important
Scaled down examples
The examples on this page are scaled down so that their viewport-size-dependent behavior can be demonstrated. Some examples also change their behavior based on your browser viewport size.
Open in a
new tab
<AppLayout>
  <DrawerToggle slot="navbar"></DrawerToggle>
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>
  <Tabs slot="drawer" orientation="vertical">
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />
        <span>Dashboard</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />
        <span>Orders</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:user-heart" style={iconStyle} />
        <span>Customers</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:package" style={iconStyle} />
        <span>Products</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:records" style={iconStyle} />
        <span>Documents</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:list" style={iconStyle} />
        <span>Tasks</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:chart" style={iconStyle} />
        <span>Analytics</span>
      </a>
    </Tab>
  </Tabs>
</AppLayout>

The layout consists of three sections: a horizontal navigation bar (navbar), a collapsible navigation drawer (drawer) and a content area. An application’s main navigation blocks should be positioned in the navbar and/or drawer, whereas views are rendered in the content area.

App Layout is responsive and adjusts automatically to fit desktop, tablet, and mobile screen sizes.

The navbar can be located on top or to the side of the drawer.

When put on top, the navbar is typically used as an application header. Application headers contain, for example, the application’s name and branding, as well as actions that apply to the entire application, such as notifications, settings, etc.

Open in a
new tab
<AppLayout>
  <DrawerToggle slot="navbar" />
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>

  <Tabs slot="drawer" orientation="vertical">
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />
        <span>Dashboard</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />
        <span>Orders</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:user-heart" style={iconStyle} />
        <span>Customers</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:package" style={iconStyle} />
        <span>Products</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:records" style={iconStyle} />
        <span>Documents</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:list" style={iconStyle} />
        <span>Tasks</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:chart" style={iconStyle} />
        <span>Analytics</span>
      </a>
    </Tab>
  </Tabs>
</AppLayout>

When placed to the side, the navbar is often seen as a view header, housing the view’s title, and actions and secondary navigation that relate only to the current view.

Open in a
new tab
<AppLayout primarySection="drawer">
  <DrawerToggle slot="navbar" />

  <h1 slot="navbar" style={h1Style}>
    Dashboard
  </h1>

  <Tabs slot="drawer" orientation="vertical">
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />

        <span>Dashboard</span>
      </a>
    </Tab>

    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />

        <span>Orders</span>
      </a>
    </Tab>
  </Tabs>
</AppLayout>

Drawer Toggle

Show and hide the drawer using a Drawer Toggle (or a Button). The Drawer Toggle (☰) should always be accessible (unless the drawer is empty) and is most often situated in the navbar.

Scrolling Behavior

Depending on whether App Layout has a defined height, the way the content inside the layout scrolls can differ.

Auto Height

When the App Layout has an undefined/auto height, which is the default behavior, the <body> element is the scrolling container for the content inside the layout.

Open in a
new tab
<AppLayout>
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>

  <Grid items={items} allRowsVisible>
    <GridColumn path="firstName" />
    <GridColumn path="lastName" />
    <GridColumn path="email" />
    <GridColumn path="profession" />
  </Grid>
</AppLayout>

The vertical scrollbar crosses the App Layout navbar and the content flows under it, allowing for translucent visual styles. Mobile browsers collapse and expand their toolbars when the user scrolls down and up, respectively. On iOS, you can tap the status bar (signal strength, battery, clock, etc.) to scroll back to the top of the page/view.

This behavior isn’t compatible with vertically scrollable Grids, or other scrolling containers within the content area whose height is 100%. To support those, define 100% height for the App Layout.

Full Height (100%)

To allow a nested component to take all the available vertical space inside the App Layout, you need to set an explicit height for the layout, commonly 100%. A common use case is to let a data grid fill the entire content area.

Note
Make sure all parent components/elements have 100% height
The full hierarchy of components from the App Layout to the <body> element need to have 100% height.
Open in a
new tab
<AppLayout style={{ height: '100%' }}>
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>

  <Grid items={items} style={{ height: '100%' }} theme="no-border">
    <GridColumn path="firstName" />
    <GridColumn path="lastName" />
    <GridColumn path="email" />
    <GridColumn path="profession" />
  </Grid>
</AppLayout>

The vertical scrollbar stays within the layout content area, and mobile browsers don’t collapse their toolbars when the content area is scrolled down.

Bottom Navbar on Small Touchscreens

When the navbar is used for navigation, the touch-optimized navbar slot can be used to provide a separate version of the navigation at the bottom of the UI, optimized for mobile phones.

Open in a
new tab
<AppLayout ref={appLayoutRef}>
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>

  <Tabs slot="navbar touch-optimized" theme="minimal equal-width-tabs" style={tabsStyle}>
    <Tab aria-label="Dashboard">
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />
      </a>
    </Tab>
    <Tab aria-label="Orders">
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />
      </a>
    </Tab>
    <Tab aria-label="Customers">
      <a tabIndex={-1}>
        <Icon icon="vaadin:user-heart" style={iconStyle} />
      </a>
    </Tab>
    <Tab aria-label="Products">
      <a tabIndex={-1}>
        <Icon icon="vaadin:package" style={iconStyle} />
      </a>
    </Tab>
  </Tabs>

  <div className="content">
    <h2>View title</h2>
    <p>View content</p>
  </div>
</AppLayout>

Best Practices

Make the choice between navbar and drawer based primarily on the number of items placed in it.

The navbar is a good choice for a small number of items (3–5), as these can fit into the viewport without scrolling.

Open in a
new tab
<AppLayout>
  <h1 slot="navbar" style={h1Style}>
    MyApp
  </h1>
  <Tabs slot="navbar" style={tabsStyle}>
    <Tab>
      <a tabIndex={-1}>Dashboard</a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>Orders</a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>Customers</a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>Products</a>
    </Tab>
  </Tabs>
</AppLayout>

When more items need to be displayed, or if small-screen support is a priority, the drawer is a better choice, as it can accommodate a longer list of links without scrolling, and collapses into a hamburger menu on small screens. Furthermore, a vertical list of items is easier for the user to scan.

Open in a
new tab
<AppLayout primarySection="drawer">
  <DrawerToggle slot="navbar" />

  <h1 slot="navbar" style={h1Style}>
    Dashboard
  </h1>

  <Tabs slot="drawer" orientation="vertical">
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />
        <span>Dashboard</span>
      </a>
    </Tab>

    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />
        <span>Orders</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:user-heart" style={iconStyle} />
        <span>Customers</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:package" style={iconStyle} />
        <span>Products</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:records" style={iconStyle} />
        <span>Documents</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:list" style={iconStyle} />
        <span>Tasks</span>
      </a>
    </Tab>
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:chart" style={iconStyle} />
        <span>Analytics</span>
      </a>
    </Tab>
  </Tabs>
</AppLayout>

For applications that require multilevel or hierarchical navigation, use the drawer to (at least) house the first level. The secondary (and tertiary) navigation items can be placed in either the drawer or the navbar.

Open in a
new tab
<AppLayout primarySection="drawer">
  <h1 slot="drawer" style={h1Style}>
    MyApp
  </h1>

  <Tabs slot="drawer" selected={1} orientation="vertical">
    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:dashboard" style={iconStyle} />
        <span>Dashboard</span>
      </a>
    </Tab>

    <Tab>
      <a tabIndex={-1}>
        <Icon icon="vaadin:cart" style={iconStyle} />
        <span>Orders</span>
      </a>
    </Tab>
  </Tabs>

  <div slot="navbar">
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <DrawerToggle />
      <h2 style={h2Style}>Orders</h2>
    </div>

    <Tabs>
      <Tab>
        <a tabIndex={-1}>All</a>
      </Tab>

      <Tab>
        <a tabIndex={-1}>Open</a>
      </Tab>
    </Tabs>
  </div>
</AppLayout>