diff --git a/docs/src/pages/components/UIShell.svx b/docs/src/pages/components/UIShell.svx
index 45e4bade..76bd3b76 100644
--- a/docs/src/pages/components/UIShell.svx
+++ b/docs/src/pages/components/UIShell.svx
@@ -26,8 +26,14 @@ components: ["Header",
   import Preview from "../../components/Preview.svelte";
 </script>
 
+### Header
+
+<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 app switcher
diff --git a/docs/src/pages/framed/UIShell/Header.svelte b/docs/src/pages/framed/UIShell/Header.svelte
new file mode 100644
index 00000000..a1a6fddf
--- /dev/null
+++ b/docs/src/pages/framed/UIShell/Header.svelte
@@ -0,0 +1,42 @@
+<script>
+  import {
+    Header,
+    HeaderNav,
+    HeaderNavItem,
+    HeaderNavMenu,
+    SkipToContent,
+    Content,
+    Grid,
+    Row,
+    Column,
+  } from "carbon-components-svelte";
+
+  let isSideNavOpen = false;
+</script>
+
+<Header company="IBM" platformName="Carbon Svelte" bind:isSideNavOpen>
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+
+  <HeaderNav>
+    <HeaderNavItem href="/" text="Link 1" />
+    <HeaderNavItem href="/" text="Link 2" />
+    <HeaderNavItem href="/" text="Link 3" />
+    <HeaderNavMenu text="Menu">
+      <HeaderNavItem href="/" text="Link 1" />
+      <HeaderNavItem href="/" text="Link 2" />
+      <HeaderNavItem href="/" text="Link 3" />
+    </HeaderNavMenu>
+  </HeaderNav>
+</Header>
+
+<Content>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>Welcome</h1>
+      </Column>
+    </Row>
+  </Grid>
+</Content>