diff --git a/packages/code-studio/src/styleguide/GotoTopButton.tsx b/packages/code-studio/src/styleguide/GotoTopButton.tsx
new file mode 100644
index 0000000000..361e908b86
--- /dev/null
+++ b/packages/code-studio/src/styleguide/GotoTopButton.tsx
@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { Button, Icon } from '@adobe/react-spectrum';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsChevronUp } from '@deephaven/icons';
+
+/**
+ * Button that scrolls to top of page and clears location hash.
+ */
+export function GotoTopButton(): JSX.Element {
+  const gotoTop = useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+
+    // Small delay to give scrolling a chance to move smoothly to top
+    setTimeout(() => {
+      window.location.hash = '';
+    }, 500);
+  }, []);
+
+  return (
+    <Button variant="accent" onPress={gotoTop}>
+      <Icon>
+        <FontAwesomeIcon icon={vsChevronUp} />
+      </Icon>
+    </Button>
+  );
+}
+
+export default GotoTopButton;
diff --git a/packages/code-studio/src/styleguide/Icons.tsx b/packages/code-studio/src/styleguide/Icons.tsx
index efd25ac9cf..ce2e3f0b32 100644
--- a/packages/code-studio/src/styleguide/Icons.tsx
+++ b/packages/code-studio/src/styleguide/Icons.tsx
@@ -6,6 +6,7 @@ import {
   dhSquareFilled,
   dhAddSmall,
 } from '@deephaven/icons';
+import { Icon } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@deephaven/components';
 import PropTypes from 'prop-types';
@@ -106,7 +107,9 @@ function Icons(): React.ReactElement {
               });
           }}
         >
-          <FontAwesomeIcon icon={icon} className="icon" />
+          <Icon size="L">
+            <FontAwesomeIcon icon={icon} />
+          </Icon>
 
           <label title={prefixedName}>{prefixedName}</label>
         </Button>
diff --git a/packages/code-studio/src/styleguide/SamplesMenu.tsx b/packages/code-studio/src/styleguide/SamplesMenu.tsx
new file mode 100644
index 0000000000..e348ca4222
--- /dev/null
+++ b/packages/code-studio/src/styleguide/SamplesMenu.tsx
@@ -0,0 +1,124 @@
+import React, { Key, useCallback, useEffect, useState } from 'react';
+import {
+  ActionButton,
+  Icon,
+  Item,
+  Menu,
+  MenuTrigger,
+  Section,
+} from '@adobe/react-spectrum';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { vsMenu } from '@deephaven/icons';
+import {
+  MENU_CATEGORY_DATA_ATTRIBUTE,
+  NO_MENU_DATA_ATTRIBUTE,
+  SPECTRUM_COMPONENT_SAMPLES_ID,
+} from './constants';
+
+interface Link {
+  id: string;
+  label: string;
+}
+type LinkCategory = { category: string; items: Link[] };
+
+/**
+ * Metadata only div that provides a MENU_CATEGORY_DATA_ATTRIBUTE defining a
+ * menu category. These will be queried by the SamplesMenu component to build
+ * up the menu sections.
+ */
+export function SampleMenuCategory({
+  'data-menu-category': dataMenuCategory,
+}: Record<typeof MENU_CATEGORY_DATA_ATTRIBUTE, string>): JSX.Element {
+  return <div data-menu-category={dataMenuCategory} />;
+}
+
+/**
+ * Creates a menu from h2, h3 elements on the page and assigns them each an id
+ * for hash navigation purposes. If the current hash matches one of the ids, it
+ * will scroll to that element. This handles the initial page load scenario.
+ * Menu sections are identified by divs with MENU_CATEGORY_DATA_ATTRIBUTE
+ * attributes.
+ */
+export function SamplesMenu(): JSX.Element {
+  const [links, setLinks] = useState<LinkCategory[]>([]);
+
+  useEffect(() => {
+    let currentSection: LinkCategory = {
+      category: '',
+      items: [],
+    };
+    const categories: LinkCategory[] = [currentSection];
+
+    const spectrumComponentsSamples = document.querySelector(
+      `#${SPECTRUM_COMPONENT_SAMPLES_ID}`
+    );
+
+    document
+      .querySelectorAll(`h2,h3,[${MENU_CATEGORY_DATA_ATTRIBUTE}]`)
+      .forEach(el => {
+        if (el.textContent == null || el.hasAttribute(NO_MENU_DATA_ATTRIBUTE)) {
+          return;
+        }
+
+        if (el.hasAttribute(MENU_CATEGORY_DATA_ATTRIBUTE)) {
+          currentSection = {
+            category: el.getAttribute(MENU_CATEGORY_DATA_ATTRIBUTE) ?? '',
+            items: [],
+          };
+          categories.push(currentSection);
+
+          return;
+        }
+
+        const id = `${
+          spectrumComponentsSamples?.contains(el) === true ? 'spectrum-' : ''
+        }${el.textContent}`
+          .toLowerCase()
+          .replace(/\s/g, '-');
+
+        // eslint-disable-next-line no-param-reassign
+        el.id = id;
+
+        currentSection.items.push({ id, label: el.textContent });
+
+        if (`#${id}` === window.location.hash) {
+          el.scrollIntoView();
+        }
+      });
+
+    setLinks(categories);
+  }, []);
+
+  const onAction = useCallback((key: Key) => {
+    const id = String(key);
+    const el = document.getElementById(id);
+    el?.scrollIntoView({
+      behavior: 'smooth',
+    });
+
+    // Keep hash in sync for page reloads, but give some delay to allow smooth
+    // scrolling above
+    setTimeout(() => {
+      window.location.hash = id;
+    }, 500);
+  }, []);
+
+  return (
+    <MenuTrigger>
+      <ActionButton>
+        <Icon>
+          <FontAwesomeIcon icon={vsMenu} />
+        </Icon>
+      </ActionButton>
+      <Menu items={links} onAction={onAction}>
+        {({ category, items }) => (
+          <Section key={category} items={items} title={category}>
+            {({ id, label }) => <Item key={id}>{label}</Item>}
+          </Section>
+        )}
+      </Menu>
+    </MenuTrigger>
+  );
+}
+
+export default SamplesMenu;
diff --git a/packages/code-studio/src/styleguide/SpectrumComponents.tsx b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
index 8a3b46cc3d..697fb87f9c 100644
--- a/packages/code-studio/src/styleguide/SpectrumComponents.tsx
+++ b/packages/code-studio/src/styleguide/SpectrumComponents.tsx
@@ -30,43 +30,42 @@ import {
   Well,
 } from '@adobe/react-spectrum';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { vsEmptyWindow, vsStarFull } from '@deephaven/icons';
+import { dh } from '@deephaven/icons';
+import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
 
 export function SpectrumComponents(): JSX.Element {
   return (
-    <>
-      <h2 className="ui-title">Spectrum Components</h2>
+    <div id={SPECTRUM_COMPONENT_SAMPLES_ID}>
+      <h2 className="ui-title" data-no-menu>
+        Spectrum Components
+      </h2>
       <Grid gap={20} columns={minmax('0px', '1fr')}>
         <View>
           <h3>Buttons</h3>
           <ButtonsSample />
         </View>
         <View>
-          <h3>Forms</h3>
-          <FormsSample />
-        </View>
-        <View>
-          <h3>Icons</h3>
-          <IconSample />
+          <h3>Collections</h3>
+          <TableViewSample />
         </View>
         <View>
-          <h3>Illustrated Message</h3>
+          <h3>Content</h3>
           <IllustratedMessageSample />
         </View>
         <View>
-          <h3>Contextual Help</h3>
-          <ContextualHelpSample />
+          <h3>Forms</h3>
+          <FormsSample />
         </View>
         <View>
-          <h3>Table View</h3>
-          <TableViewSample />
+          <h3>Overlays</h3>
+          <ContextualHelpSample />
         </View>
         <View>
           <h3>Wells</h3>
           <Well>This is a well.</Well>
         </View>
       </Grid>
-    </>
+    </div>
   );
 }
 
@@ -76,11 +75,12 @@ function ButtonsSample(): JSX.Element {
   return (
     <Grid
       autoFlow="column"
-      columnGap={14}
-      columns={repeat(3, 'size-1600')}
-      rows={repeat(6, 'size-500')}
+      columnGap="size-250"
+      rowGap="size-150"
+      columns={repeat(4, 'size-2000')}
+      rows={repeat(8, 'size-400')}
     >
-      <label>style=&quot;outline&quot;</label>
+      <label>Button style=&quot;outline&quot;</label>
       <Button variant="primary" style="outline">
         Primary
       </Button>
@@ -93,11 +93,17 @@ function ButtonsSample(): JSX.Element {
       <Button variant="negative" style="outline">
         Negative
       </Button>
+      <Button variant="primary" staticColor="black" style="outline">
+        Static Black
+      </Button>
+      <Button variant="primary" staticColor="white" style="outline">
+        Static White
+      </Button>
       <Button variant="primary" isDisabled style="outline">
         Disabled
       </Button>
 
-      <label>style=&quot;fill&quot;</label>
+      <label>Button style=&quot;fill&quot;</label>
       <Button variant="primary" style="fill">
         Primary
       </Button>
@@ -110,28 +116,51 @@ function ButtonsSample(): JSX.Element {
       <Button variant="negative" style="fill">
         Negative
       </Button>
+      <Button variant="primary" staticColor="black" style="fill">
+        Static Black
+      </Button>
+      <Button variant="primary" staticColor="white" style="fill">
+        Static White
+      </Button>
       <Button variant="primary" isDisabled style="fill">
         Disabled
       </Button>
 
       <label>Action Button</label>
       <ActionButton>Normal</ActionButton>
-      <ActionButton isQuiet>Quiet</ActionButton>
+      <ActionButton gridRow="span 3" isQuiet>
+        Quiet
+      </ActionButton>
+      <ActionButton staticColor="black">Static Black</ActionButton>
+      <ActionButton staticColor="white">Static White</ActionButton>
       <ActionButton isDisabled>Disabled</ActionButton>
+
+      <label>Toggle Button</label>
+      <ToggleButton>Normal</ToggleButton>
+      <ToggleButton isQuiet>Quiet</ToggleButton>
+      <ToggleButton gridRow="span 2" isEmphasized>
+        Emphasized
+      </ToggleButton>
+      <ToggleButton staticColor="black">Static Black</ToggleButton>
+      <ToggleButton staticColor="white">Static White</ToggleButton>
+      <ToggleButton isDisabled>Disabled</ToggleButton>
     </Grid>
   );
 }
 
 function ContextualHelpSample(): JSX.Element {
   return (
-    <ContextualHelp variant="info">
-      <Heading>Need help?</Heading>
-      <Content>
-        <Text>
-          This is a helpful description of the thing you need help with.
-        </Text>
-      </Content>
-    </ContextualHelp>
+    <>
+      <Text>Contextual Help</Text>
+      <ContextualHelp variant="info">
+        <Heading>Need help?</Heading>
+        <Content>
+          <Text>
+            This is a helpful description of the thing you need help with.
+          </Text>
+        </Content>
+      </ContextualHelp>
+    </>
   );
 }
 
@@ -146,64 +175,61 @@ function FormsSample(): JSX.Element {
           <Item key="three">Three</Item>
         </ComboBox>
         <Checkbox>Checkbox</Checkbox>
+        <Slider label="Slider" defaultValue={24} />
+        <Switch>Switch</Switch>
       </Grid>
     </Form>
   );
 }
 
-function IconSample(): JSX.Element {
-  return (
-    <Icon>
-      <FontAwesomeIcon icon={vsStarFull} />
-    </Icon>
-  );
-}
-
 function IllustratedMessageSample(): JSX.Element {
   return (
     <IllustratedMessage>
       <Icon size="XL">
-        <FontAwesomeIcon icon={vsEmptyWindow} />
+        <FontAwesomeIcon icon={dh.vsEmptyWindow} />
       </Icon>
-      <Heading>No results</Heading>
-      <Content>Try another search</Content>
+      <Heading>Illustrated Message</Heading>
+      <Content>This is the content of the message.</Content>
     </IllustratedMessage>
   );
 }
 
 function TableViewSample(): JSX.Element {
   return (
-    <TableView selectionMode="multiple">
-      <TableHeader>
-        <Column title="Person">
-          <Column allowsResizing>Name</Column>
-          <Column>Age</Column>
-        </Column>
-        <Column title="Address">
-          <Column allowsResizing>City</Column>
-          <Column>State</Column>
-        </Column>
-      </TableHeader>
-      <TableBody>
-        <Row>
-          <Cell>John</Cell>
-          <Cell>42</Cell>
-          <Cell>San Francisco</Cell>
-          <Cell>CA</Cell>
-        </Row>
-        <Row>
-          <Cell>Jane</Cell>
-          <Cell>38</Cell>
-          <Cell>San Francisco</Cell>
-          <Cell>CA</Cell>
-        </Row>
-        <Row>
-          <Cell>Becky</Cell>
-          <Cell>12</Cell>
-          <Cell>San Francisco</Cell>
-          <Cell>CA</Cell>
-        </Row>
-      </TableBody>
-    </TableView>
+    <>
+      <label id="table-view-sample">Table View</label>
+      <TableView aria-labelledby="table-view-sample" selectionMode="multiple">
+        <TableHeader>
+          <Column title="Person">
+            <Column allowsResizing>Name</Column>
+            <Column>Age</Column>
+          </Column>
+          <Column title="Address">
+            <Column allowsResizing>City</Column>
+            <Column>State</Column>
+          </Column>
+        </TableHeader>
+        <TableBody>
+          <Row>
+            <Cell>John</Cell>
+            <Cell>42</Cell>
+            <Cell>San Francisco</Cell>
+            <Cell>CA</Cell>
+          </Row>
+          <Row>
+            <Cell>Jane</Cell>
+            <Cell>38</Cell>
+            <Cell>San Francisco</Cell>
+            <Cell>CA</Cell>
+          </Row>
+          <Row>
+            <Cell>Becky</Cell>
+            <Cell>12</Cell>
+            <Cell>San Francisco</Cell>
+            <Cell>CA</Cell>
+          </Row>
+        </TableBody>
+      </TableView>
+    </>
   );
 }
diff --git a/packages/code-studio/src/styleguide/StyleGuide.scss b/packages/code-studio/src/styleguide/StyleGuide.scss
index 58d270d8e2..3f77914e82 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.scss
+++ b/packages/code-studio/src/styleguide/StyleGuide.scss
@@ -125,11 +125,6 @@ h5.sub-title {
     }
   }
 
-  .icon,
-  .icon .svg-inline--fa {
-    font-size: 36px;
-  }
-
   .card label {
     max-width: 100%;
     font-size: 0.8rem;
diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index e5ff92c47b..d4db65af1d 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
+import { Flex } from '@adobe/react-spectrum';
 import { ContextMenuRoot } from '@deephaven/components';
 
 import Alerts from './Alerts';
@@ -23,56 +25,63 @@ import DraggableLists from './DraggableLists';
 import Navigations from './Navigations';
 import ThemeColors from './ThemeColors';
 import SpectrumComponents from './SpectrumComponents';
+import SamplesMenu, { SampleMenuCategory } from './SamplesMenu';
+import GotoTopButton from './GotoTopButton';
+
+const stickyProps = {
+  position: 'sticky',
+  justifyContent: 'end',
+  zIndex: 1,
+} as const;
 
 function StyleGuide(): React.ReactElement {
   return (
     <div className="container style-guide-container">
-      <div style={{ marginTop: '2rem', paddingBottom: '1rem' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: '2rem',
+          paddingBottom: '1rem',
+        }}
+      >
         <h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
       </div>
+      <Flex {...stickyProps} marginTop={-56} top={20}>
+        <SamplesMenu />
+      </Flex>
+      <Flex {...stickyProps} top="calc(100vh - 40px)">
+        <GotoTopButton />
+      </Flex>
 
       <Typograpy />
 
+      <SampleMenuCategory data-menu-category="Colors" />
       <Colors />
-
       <ThemeColors />
 
+      <SampleMenuCategory data-menu-category="Components" />
       <Buttons />
-
       <Progress />
-
       <Alerts />
-
       <Inputs />
-
       <ItemListInputs />
-
       <DraggableLists />
-
       <TimeSliderInputs />
-
       <Dialog />
-
       <Modals />
-
       <ContextMenus />
-
       <DropdownMenus />
-
       <Navigations />
-
       <Tooltips />
-
       <Icons />
-
       <Editors />
-
       <Grids />
-
       <Charts />
-
       <ContextMenuRoot />
 
+      <SampleMenuCategory data-menu-category="Spectrum Components" />
       <SpectrumComponents />
     </div>
   );
diff --git a/packages/code-studio/src/styleguide/Typography.tsx b/packages/code-studio/src/styleguide/Typography.tsx
index 747e2ec79e..a9255d2f55 100644
--- a/packages/code-studio/src/styleguide/Typography.tsx
+++ b/packages/code-studio/src/styleguide/Typography.tsx
@@ -3,15 +3,23 @@ import React from 'react';
 function Typography(): React.ReactElement {
   return (
     <div>
-      <h2 className="ui-title">Typograpy</h2>
+      <h2 className="ui-title">Typography</h2>
       <div className="row">
         <div className="col">
-          <h1 className="text-muted">h1. Unused</h1>
-          <h2 className="text-muted">h2. Unused</h2>
-          <h3 className="text-muted">h3. Unused</h3>
-          <h4>h4. Standard Heading</h4>
-          <h5>h5. Small Heading</h5>
-          <h6 className="text-muted">h6. Unused</h6>
+          <h1 className="text-muted" data-no-menu>
+            h1. Unused
+          </h1>
+          <h2 className="text-muted" data-no-menu>
+            h2. Unused
+          </h2>
+          <h3 className="text-muted" data-no-menu>
+            h3. Unused
+          </h3>
+          <h4 data-no-menu>h4. Standard Heading</h4>
+          <h5 data-no-menu>h5. Small Heading</h5>
+          <h6 className="text-muted" data-no-menu>
+            h6. Unused
+          </h6>
         </div>
 
         <div className="col">
diff --git a/packages/code-studio/src/styleguide/constants.ts b/packages/code-studio/src/styleguide/constants.ts
new file mode 100644
index 0000000000..af5b342f11
--- /dev/null
+++ b/packages/code-studio/src/styleguide/constants.ts
@@ -0,0 +1,3 @@
+export const MENU_CATEGORY_DATA_ATTRIBUTE = 'data-menu-category';
+export const NO_MENU_DATA_ATTRIBUTE = 'data-no-menu';
+export const SPECTRUM_COMPONENT_SAMPLES_ID = 'spectrum-component-samples';