>;
+
+export default function SecondaryPage() {
+ const {
+ urlParams: { placement = 'top' },
+ setUrlParams,
+ } = useContext(AppContext as PageContext);
+ const p = placement as 'top' | 'bottom' | 'start' | 'end';
+ const isVertical = p === 'start' || p === 'end';
+ const content = isVertical ? secondaryVerticalContent : secondaryHorizontalContent;
+
+ const scrollableContent = (
+
+ NavigationBar — Secondary
+
+
+ {filler}
+
+ );
+
+ return (
+
+ {(p === 'top' || p === 'start') && (
+
+ )}
+ {scrollableContent}
+ {(p === 'bottom' || p === 'end') && (
+
+ )}
+
+ );
+}
diff --git a/pages/navigation-bar/simple.page.tsx b/pages/navigation-bar/simple.page.tsx
new file mode 100644
index 0000000000..a2843d8e3e
--- /dev/null
+++ b/pages/navigation-bar/simple.page.tsx
@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+import { primaryHorizontalContent, secondaryHorizontalContent } from './common';
+
+export default function NavigationBarSimplePage() {
+ return (
+
+
+
+ Primary (light)
+
+ Default page-matching header. Child components keep their normal colors.
+
+
+
+
+
+ Primary accent (inverted)
+
+ Branded dark header. Child components adapt via the navigation-bar visual context.
+
+
+
+
+
+ Secondary
+
+ Neutral toolbar style matching the AppLayout toolbar.
+
+
+
+
+
+ );
+}
diff --git a/pages/navigation-bar/top-navigation-replica.page.tsx b/pages/navigation-bar/top-navigation-replica.page.tsx
new file mode 100644
index 0000000000..32f446d685
--- /dev/null
+++ b/pages/navigation-bar/top-navigation-replica.page.tsx
@@ -0,0 +1,233 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import InternalButton from '~components/button/internal';
+import ButtonDropdown from '~components/button-dropdown';
+import Input from '~components/input';
+import MenuDropdown from '~components/internal/components/menu-dropdown';
+import Link from '~components/link';
+import InternalLink from '~components/link/internal';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import TopNavigation from '~components/top-navigation';
+
+import { SimplePage } from '../app/templates';
+
+const utilities = (
+
+
+
+
+
+
+
+
+
+
+
+ jane@example.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+ jane@example.com
+
+
+
+ -
+ Link underline on hover — public Link shows underline. Internal uses
+ variant="top-navigation" which removes it.
+
+ -
+ ButtonDropdown navigation styling — no flat trigger variant publicly available.
+
+ -
+ Badge on icon buttons — not exposed on public Button.
+
+ -
+ Responsive overflow — by design, builder handles responsive behavior.
+
+
+
+
+
+ );
+}
diff --git a/pages/navigation-bar/vertical-nav-with-labels.page.tsx b/pages/navigation-bar/vertical-nav-with-labels.page.tsx
new file mode 100644
index 0000000000..a57ccfd9e6
--- /dev/null
+++ b/pages/navigation-bar/vertical-nav-with-labels.page.tsx
@@ -0,0 +1,199 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Badge from '~components/badge';
+import Box from '~components/box';
+import Button from '~components/button';
+import Icon from '~components/icon';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+const sections = [
+ {
+ items: [
+ { icon: 'grid-view' as const, label: 'Dashboard', active: true },
+ { icon: 'folder' as const, label: 'Projects', badge: '3' },
+ { icon: 'share' as const, label: 'Deployments' },
+ { icon: 'status-positive' as const, label: 'Health' },
+ { icon: 'group-active' as const, label: 'Team' },
+ ],
+ },
+ {
+ title: 'Resources',
+ items: [
+ { icon: 'search' as const, label: 'Explorer' },
+ { icon: 'ticket' as const, label: 'Billing' },
+ { icon: 'settings' as const, label: 'Settings' },
+ ],
+ },
+];
+
+function NavItem({
+ icon,
+ label,
+ active,
+ badge,
+ expanded,
+}: {
+ icon: any;
+ label: string;
+ active?: boolean;
+ badge?: string;
+ expanded: boolean;
+}) {
+ const [hovered, setHovered] = useState(false);
+ return (
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ gap: '10px',
+ padding: expanded ? '8px 12px' : '8px',
+ justifyContent: expanded ? 'flex-start' : 'center',
+ borderRadius: '8px',
+ cursor: 'pointer',
+ backgroundColor: active ? 'rgba(0, 115, 187, 0.1)' : hovered ? 'rgba(0, 0, 0, 0.04)' : 'transparent',
+ fontWeight: active ? 600 : 400,
+ whiteSpace: 'nowrap',
+ }}
+ >
+
+ {expanded && {label}}
+ {expanded && badge && {badge}}
+
+ );
+}
+
+function SidebarContent({ expanded, onToggle }: { expanded: boolean; onToggle: () => void }) {
+ return (
+
+
+
{
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ onToggle();
+ }
+ }}
+ style={{ cursor: 'pointer' }}
+ >
+
+ aws
+
+
+ {expanded && (
+ <>
+
+ CloudManager
+
+
+
+
+
+ )}
+
+
+
+ {sections.map((section, si) => (
+
+ {expanded && section.title && (
+
+ {section.title}
+
+ )}
+
+ {section.items.map(item => (
+
+ ))}
+
+
+ ))}
+
+
+
+
+ {expanded && (
+
+
+ Jane Doe
+
+
+ jane@example.com
+
+
+ )}
+
+
+
setExpanded(prev => !prev)} />}
+ />
+
+
+ Dashboard
+
+ Click the aws logo or the collapse button to toggle the sidebar.
+
+ {Array.from({ length: 30 }, (_, i) => (
+
+ Content line {i + 1}
+
+ ))}
+
+
+ tags in text content, or button text.",
+ "$value": "14px",
+ },
+ "font-size-body-s": {
+ "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+ "$value": "12px",
+ },
+ "font-size-display-l": {
+ "$description": "The default font size for large display text.",
+ "$value": "42px",
+ },
+ "font-size-heading-l": {
+ "$description": "The default font size for h2s.",
+ "$value": "20px",
+ },
+ "font-size-heading-m": {
+ "$description": "The default font size for h3s.",
+ "$value": "18px",
+ },
+ "font-size-heading-s": {
+ "$description": "The default font size for h4s.",
+ "$value": "16px",
+ },
+ "font-size-heading-xl": {
+ "$description": "The default font size for h1s.",
+ "$value": "24px",
+ },
+ "font-size-heading-xs": {
+ "$description": "The default font size for h5s.",
+ "$value": "14px",
+ },
+ "font-size-tabs": {
+ "$description": "The default font size for tabs.",
+ "$value": "16px",
+ },
+ "font-weight-alert-header": {
+ "$description": "The default font weight for alert header text.",
+ "$value": "700",
+ },
+ "font-weight-bold": {
+ "$description": "The default bold font weight for body text. For example, and tags in text content.",
+ "$value": "700",
+ },
+ "font-weight-button": {
+ "$description": "The default font weight for button text.",
+ "$value": "700",
+ },
+ "font-weight-display-l": {
+ "$description": "The default font weight for large display text.",
+ "$value": "700",
+ },
+ "font-weight-flashbar-header": {
+ "$description": "The default font weight for flashbar header text.",
+ "$value": "700",
+ },
+ "font-weight-heading-l": {
+ "$description": "The default font weight for h2s.",
+ "$value": "700",
+ },
+ "font-weight-heading-m": {
+ "$description": "The default font weight for h3s.",
+ "$value": "700",
+ },
+ "font-weight-heading-s": {
+ "$description": "The default font weight for h4s.",
+ "$value": "700",
+ },
+ "font-weight-heading-xl": {
+ "$description": "The default font weight for h1s.",
+ "$value": "700",
+ },
+ "font-weight-heading-xs": {
+ "$description": "The default font weight for h5s.",
+ "$value": "700",
+ },
+ "font-weight-heavy": {
+ "$description": "The default heavy font weight.",
+ "$value": "700",
+ },
+ "font-weight-lighter": {
+ "$description": "The default lighter font weight.",
+ "$value": "300",
+ },
+ "font-weight-normal": {
+ "$description": "The default normal font weight.",
+ "$value": "400",
+ },
+ "font-weight-tabs": {
+ "$description": "The default font weight for tabs.",
+ "$value": "700",
+ },
+ "font-weight-tabs-disabled": {
+ "$description": "The default font weight for disabled tabs.",
+ "$value": "700",
+ },
+ "letter-spacing-display-l": {
+ "$description": "The default letter spacing for large display text.",
+ "$value": "-0.03em",
+ },
+ "letter-spacing-heading-l": {
+ "$description": "The default letter spacing for h2s.",
+ "$value": "-0.015em",
+ },
+ "letter-spacing-heading-m": {
+ "$description": "The default letter spacing for h3s.",
+ "$value": "-0.010em",
+ },
+ "letter-spacing-heading-s": {
+ "$description": "The default letter spacing for h4s.",
+ "$value": "-0.005em",
+ },
+ "letter-spacing-heading-xl": {
+ "$description": "The default letter spacing for h1s.",
+ "$value": "-0.02em",
+ },
+ "letter-spacing-heading-xs": {
+ "$description": "The default letter spacing for h5s.",
+ "$value": "normal",
+ },
+ "line-height-body-m": {
+ "$description": "The default line height for regular body text.",
+ "$value": "20px",
+ },
+ "line-height-body-s": {
+ "$description": "The default line height for small body text.",
+ "$value": "16px",
+ },
+ "line-height-display-l": {
+ "$description": "The default line height for large display text.",
+ "$value": "48px",
+ },
+ "line-height-heading-l": {
+ "$description": "The default line height for h2s.",
+ "$value": "24px",
+ },
+ "line-height-heading-m": {
+ "$description": "The default line height for h3s.",
+ "$value": "22px",
+ },
+ "line-height-heading-s": {
+ "$description": "The default line height for h4s.",
+ "$value": "20px",
+ },
+ "line-height-heading-xl": {
+ "$description": "The default line height for h1s.",
+ "$value": "30px",
+ },
+ "line-height-heading-xs": {
+ "$description": "The default line height for h5s.",
+ "$value": "18px",
+ },
+ "line-height-tabs": {
+ "$description": "The default line height for tabs.",
+ "$value": "20px",
+ },
+ "motion-duration-avatar-gen-ai-gradient": {
+ "$description": "The duration for gradient motion of gen-ai avatars.",
+ "$value": {
+ "default": "3600ms",
+ "disabled": "0ms",
+ },
+ },
+ "motion-duration-avatar-loading-dots": {
+ "$description": "The duration for loading motion of avatars.",
+ "$value": {
+ "default": "1200ms",
+ "disabled": "0ms",
+ },
+ },
+ "motion-duration-complex": {
+ "$description": "The duration for drawing more attention or accommodating for more complexity.",
+ "$value": {
+ "default": "250ms",
+ "disabled": "0ms",
+ },
+ },
+ "motion-duration-expressive": {
+ "$description": "The duration for accommodating the motion with more expressiveness.",
+ "$value": {
+ "default": "165ms",
+ "disabled": "0ms",
+ },
+ },
+ "motion-duration-responsive": {
+ "$description": "The duration for making the motion feel quick and responsive.",
+ "$value": {
+ "default": "115ms",
+ "disabled": "0ms",
+ },
+ },
+ "motion-easing-avatar-gen-ai-gradient": {
+ "$description": "The easing curve for gradient motion of gen-ai avatars.",
+ "$value": {
+ "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+ "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+ },
+ },
+ "motion-easing-expressive": {
+ "$description": "The easing curve for drawing a user's attention in an expressive way.",
+ "$value": {
+ "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+ "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+ },
+ },
+ "motion-easing-responsive": {
+ "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+ "$value": {
+ "default": "cubic-bezier(0, 0, 0, 1)",
+ "disabled": "cubic-bezier(0, 0, 0, 1)",
+ },
+ },
+ "motion-easing-sticky": {
+ "$description": "The easing curve for making an element sticky to a certain state.",
+ "$value": {
+ "default": "cubic-bezier(1, 0, 0.83, 1)",
+ "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+ },
+ },
+ "motion-keyframes-fade-in": {
+ "$description": "The CSS keyframes for showing an element.",
+ "$value": {
+ "default": "awsui-fade-in-35003c",
+ "disabled": "awsui-fade-in-35003c",
+ },
+ },
+ "motion-keyframes-fade-out": {
+ "$description": "The CSS keyframes for hiding an element.",
+ "$value": {
+ "default": "awsui-fade-out-35003c",
+ "disabled": "awsui-fade-out-35003c",
+ },
+ },
+ "motion-keyframes-scale-popup": {
+ "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+ "$value": {
+ "default": "awsui-scale-popup-35003c",
+ "disabled": "awsui-scale-popup-35003c",
+ },
+ },
+ "motion-keyframes-status-icon-error": {
+ "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+ "$value": {
+ "default": "awsui-status-icon-error-35003c",
+ "disabled": "awsui-status-icon-error-35003c",
+ },
+ },
+ "shadow-card": {
+ "$description": "The shadow of a card.",
+ "$value": {
+ "dark": "none",
+ "light": "none",
+ },
+ },
+ "shadow-container-active": {
+ "$description": "Shadow for containers and cards in active state.",
+ "$value": {
+ "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+ "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+ },
+ },
+ "size-vertical-input": {
+ "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.",
+ "$value": {
+ "comfortable": "32px",
+ "compact": "28px",
+ },
+ },
+ "space-alert-vertical": {
+ "$description": "The vertical padding inside alert components.",
+ "$value": {
+ "comfortable": "8px",
+ "compact": "4px",
+ },
+ },
+ "space-button-horizontal": {
+ "$description": "The horizontal padding inside buttons.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "16px",
+ },
+ },
+ "space-button-vertical": {
+ "$description": "The vertical padding inside buttons.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "2px",
+ },
+ },
+ "space-card-horizontal-default": {
+ "$description": "The default horizontal padding inside a card.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "20px",
+ },
+ },
+ "space-card-horizontal-embedded": {
+ "$description": "The horizontal padding inside embedded a card.",
+ "$value": {
+ "comfortable": "12px",
+ "compact": "10px",
+ },
+ },
+ "space-card-vertical-default": {
+ "$description": "The default vertical padding inside a card.",
+ "$value": {
+ "comfortable": "16px",
+ "compact": "12px",
+ },
+ },
+ "space-card-vertical-embedded": {
+ "$description": "The vertical padding inside embedded a card.",
+ "$value": {
+ "comfortable": "10px",
+ "compact": "8px",
+ },
+ },
+ "space-container-horizontal": {
+ "$description": "The horizontal padding inside a container.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "20px",
+ },
+ },
+ "space-field-horizontal": {
+ "$description": "The horizontal padding inside field components.",
+ "$value": {
+ "comfortable": "12px",
+ "compact": "12px",
+ },
+ },
+ "space-field-vertical": {
+ "$description": "The vertical padding inside control components.",
+ "$value": {
+ "comfortable": "5px",
+ "compact": "3px",
+ },
+ },
+ "space-option-padding-horizontal": {
+ "$description": "The horizontal padding inside dropdown option items.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "20px",
+ },
+ },
+ "space-option-padding-vertical": {
+ "$description": "The vertical padding inside dropdown option items.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "4px",
+ },
+ },
+ "space-scaled-l": {
+ "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "16px",
+ },
+ },
+ "space-scaled-m": {
+ "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+ "$value": {
+ "comfortable": "16px",
+ "compact": "12px",
+ },
+ },
+ "space-scaled-s": {
+ "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+ "$value": {
+ "comfortable": "12px",
+ "compact": "8px",
+ },
+ },
+ "space-scaled-xl": {
+ "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+ "$value": {
+ "comfortable": "24px",
+ "compact": "20px",
+ },
+ },
+ "space-scaled-xs": {
+ "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+ "$value": {
+ "comfortable": "8px",
+ "compact": "4px",
+ },
+ },
+ "space-scaled-xxl": {
+ "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+ "$value": {
+ "comfortable": "32px",
+ "compact": "24px",
+ },
+ },
+ "space-scaled-xxs": {
+ "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "2px",
+ },
+ },
+ "space-scaled-xxxl": {
+ "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+ "$value": {
+ "comfortable": "40px",
+ "compact": "32px",
+ },
+ },
+ "space-scaled-xxxs": {
+ "$description": "The XXXS spacing unit which scales between modes.",
+ "$value": {
+ "comfortable": "2px",
+ "compact": "0px",
+ },
+ },
+ "space-static-l": {
+ "$description": "The static L spacing unit.",
+ "$value": {
+ "comfortable": "20px",
+ "compact": "20px",
+ },
+ },
+ "space-static-m": {
+ "$description": "The static M spacing unit.",
+ "$value": {
+ "comfortable": "16px",
+ "compact": "16px",
+ },
+ },
+ "space-static-s": {
+ "$description": "The static S spacing unit.",
+ "$value": {
+ "comfortable": "12px",
+ "compact": "12px",
+ },
+ },
+ "space-static-xl": {
+ "$description": "The static XL spacing unit.",
+ "$value": {
+ "comfortable": "24px",
+ "compact": "24px",
+ },
+ },
+ "space-static-xs": {
+ "$description": "The static XS spacing unit.",
+ "$value": {
+ "comfortable": "8px",
+ "compact": "8px",
+ },
+ },
+ "space-static-xxl": {
+ "$description": "The static XXL spacing unit.",
+ "$value": {
+ "comfortable": "32px",
+ "compact": "32px",
+ },
+ },
+ "space-static-xxs": {
+ "$description": "The static XXS spacing unit.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "4px",
+ },
+ },
+ "space-static-xxxl": {
+ "$description": "The static XXXL spacing unit.",
+ "$value": {
+ "comfortable": "40px",
+ "compact": "40px",
+ },
+ },
+ "space-static-xxxs": {
+ "$description": "The static XXXS spacing unit.",
+ "$value": {
+ "comfortable": "2px",
+ "compact": "2px",
+ },
+ },
+ "space-tabs-vertical": {
+ "$description": "The vertical padding inside tabs.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "2px",
+ },
+ },
+ "space-token-vertical": {
+ "$description": "The vertical padding inside tokens.",
+ "$value": {
+ "comfortable": "4px",
+ "compact": "2px",
+ },
+ },
+ "space-tree-view-indentation": {
+ "$description": "The indentation of tree view items.",
+ "$value": {
+ "comfortable": "24px",
+ "compact": "24px",
+ },
+ },
+ },
+ },
"top-navigation": {
"tokens": {
"border-radius-action-card-default": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 3b261097ef..25340c3fe2 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -19042,6 +19042,144 @@ need to be direct children of the group:
}
`;
+exports[`Components definition for navigation-bar matches the snapshot: navigation-bar 1`] = `
+{
+ "dashCaseName": "navigation-bar",
+ "events": [],
+ "functions": [],
+ "name": "NavigationBar",
+ "properties": [
+ {
+ "description": "Accessible label for the landmark. Required when multiple navigation bars
+exist on the same page to distinguish them for assistive technology.",
+ "name": "ariaLabel",
+ "optional": true,
+ "type": "string",
+ },
+ {
+ "description": "ID of an element that labels this landmark. Alternative to \`ariaLabel\`.
+Ignored when \`ariaLabel\` or \`i18nStrings.ariaLabel\` is provided.",
+ "name": "ariaLabelledBy",
+ "optional": true,
+ "type": "string",
+ },
+ {
+ "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+ "description": "Adds the specified classes to the root element of the component.",
+ "name": "className",
+ "optional": true,
+ "type": "string",
+ },
+ {
+ "description": "Localized strings required by the component.",
+ "i18nTag": true,
+ "inlineType": {
+ "name": "NavigationBarProps.I18nStrings",
+ "properties": [
+ {
+ "name": "ariaLabel",
+ "optional": true,
+ "type": "string",
+ },
+ ],
+ "type": "object",
+ },
+ "name": "i18nStrings",
+ "optional": true,
+ "type": "NavigationBarProps.I18nStrings",
+ },
+ {
+ "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+ "description": "Adds the specified ID to the root element of the component.",
+ "name": "id",
+ "optional": true,
+ "type": "string",
+ },
+ {
+ "defaultValue": "'top'",
+ "description": "Placement relative to container. Controls border edge and content flow.
+
+- \`top\`: Horizontal, border on bottom edge.
+- \`bottom\`: Horizontal, border on top edge.
+- \`start\`: Vertical on start side (left in LTR), border on end edge.
+- \`end\`: Vertical on end side (right in LTR), border on start edge.",
+ "inlineType": {
+ "name": "NavigationBarProps.Placement",
+ "type": "union",
+ "values": [
+ "end",
+ "start",
+ "top",
+ "bottom",
+ ],
+ },
+ "name": "placement",
+ "optional": true,
+ "type": "string",
+ },
+ {
+ "defaultValue": "'region'",
+ "description": "Landmark role rendered by the navigation bar.
+
+- \`navigation\`: Renders \`