---
components: ["Header",
"HeaderAction",
"HeaderActionLink",
"HeaderSearch",
"HeaderNav",
"HeaderNavItem",
"HeaderNavMenu",
"HeaderPanelDivider",
"HeaderPanelLink",
"HeaderPanelLinks",
"HeaderUtilities",
"SideNav",
"SideNavItems",
"SideNavLink",
"SideNavMenu",
"SideNavMenuItem",
"Content",
"SkipToContent",
"HeaderGlobalAction"]
---

<script>
   import { InlineNotification } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`UIShell` provides a collection of components for building application shells and navigation structures. It includes header, side navigation, and content components that work together to create a cohesive user interface.

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Currently, the UI Shell is not themable and only supports dark mode.
  </div>
</InlineNotification>

Open the following examples in a new tab to experience them in full.

## Header

Create a basic header with the `Header` component.

<FileSource src="/framed/UIShell/Header" />

## Header with side navigation

The hamburger menu will automatically be rendered if the `SideNav` component is used.

<FileSource src="/framed/UIShell/HeaderNav" />

## Header with side navigation (rail)

Set `rail` to `true` on `SideNav` to use the rail variant.

<FileSource src="/framed/UIShell/HeaderNavRail" />

## Header with app switcher

The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.

You can disable the `transition` by setting it to `false`.

<FileSource src="/framed/UIShell/HeaderSwitcher" />

## Header with multiple switchers

Multiple switchers can be used, and the switcher button can be customized. For example, display a tooltip using `iconDescription`.

Control the tooltip alignment using `tooltipAlignment`.

Note that providing `text` overrides the tooltip.

<FileSource src="/framed/UIShell/HeaderMultipleSwitcher" />

## Header with global search

Add a global search component to the header.

<FileSource src="/framed/UIShell/HeaderSearch" />

## Header with utilities

Include utility components in the header using `HeaderUtilities`.

<FileSource src="/framed/UIShell/HeaderUtilities" />

## Header with persisted hamburger menu

Create a header with a persistent hamburger menu state.

<FileSource src="/framed/UIShell/PersistedHamburgerMenu" />