Docs

Docs

App Layout

App Layout is a component for building common application layouts.
<AppLayout>
  <DrawerToggle slot='navbar'></DrawerToggle>
  <h3 slot='navbar'>MyApp</h3>
  <Tabs slot='drawer' orientation='vertical'>
    <Tab>
      <a>Dashboard</a>
    </Tab>
    <Tab>
      <a>Orders</a>
    </Tab>
    <Tab>
      <a>Customers</a>
    </Tab>
    <Tab>
      <a>Products</a>
    </Tab>
    <Tab>
      <a>Documents</a>
    </Tab>
    <Tab>
      <a>Tasks</a>
    </Tab>
    <Tab>
      <a>Analytics</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.