App Layout

AppLayout is the outer viewport shell. See Page structure for the full application shell hierarchy.

When there is no sidebar, the AppHeader inside AppLayoutContent should omit the hamburger SidebarTrigger; there is no sidebar to open.

With sidebar

Code

<SidebarProvider defaultOpen>
  <AppLayout>
    <Sidebar>
      <SidebarContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton
              isActive
              icon={<LayoutDashboardIcon size={16} />}
              tooltip="Dashboard"
            >
              Dashboard
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarContent>
    </Sidebar>

    <AppLayoutContent>
      <AppHeader>
        <AppHeaderLeading>
          <SidebarTrigger
            icon={<MenuIcon size={16} />}
            className="tw:md:hidden"
          />
        </AppHeaderLeading>
        <AppHeaderContent>Dashboard</AppHeaderContent>
        <AppHeaderTrailing>
          <AppHeaderNotifications count={3} />
        </AppHeaderTrailing>
      </AppHeader>

      <AppLayoutMain>
        <h1 className="tw:text-2xl tw:font-semibold tw:tracking-tight">
          Dashboard
        </h1>
      </AppLayoutMain>
    </AppLayoutContent>
  </AppLayout>
</SidebarProvider>

Without sidebar

When the layout has no sidebar, omit SidebarProvider and the SidebarTrigger in the header.

Code

<AppLayout>
  <AppLayoutContent>
    <AppHeader>
      <AppHeaderContent>
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Dashboard</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </AppHeaderContent>
      <AppHeaderTrailing>
        <AppHeaderNotifications count={3} />
      </AppHeaderTrailing>
    </AppHeader>
    <AppLayoutMain>
      <h1 className="tw:text-2xl tw:font-semibold tw:tracking-tight">
        Dashboard
      </h1>
    </AppLayoutMain>
  </AppLayoutContent>
</AppLayout>

API

AppLayout

No documented props

AppLayoutContent

No documented props

AppLayoutMain

No documented props