diff --git a/src/panel-layout/styles.scss b/src/panel-layout/styles.scss
index 62e17be8c4..fcd953c53a 100644
--- a/src/panel-layout/styles.scss
+++ b/src/panel-layout/styles.scss
@@ -30,6 +30,17 @@
.panel {
display: flex;
flex-shrink: 0;
+ @include styles.with-motion {
+ transition: inline-size awsui.$motion-duration-complex awsui.$motion-easing-responsive;
+ }
+ &-resizing {
+ @include styles.with-motion {
+ transition: none;
+ }
+ > .panel-content {
+ pointer-events: none;
+ }
+ }
> .handle {
display: flex;
align-items: center;
@@ -59,6 +70,9 @@
.display-panel-only > & {
display: none;
}
+ .panel-resizing ~ & {
+ pointer-events: none;
+ }
@include focus-visible.when-visible {
@include container-inner-focus-ring;
}
diff --git a/src/side-navigation/implementation.tsx b/src/side-navigation/implementation.tsx
index 4b2d11a066..80c73065ce 100644
--- a/src/side-navigation/implementation.tsx
+++ b/src/side-navigation/implementation.tsx
@@ -24,6 +24,9 @@ export function SideNavigationImplementation({
items = [],
onFollow,
onChange,
+ expandIconPosition = 'start',
+ collapsed = false,
+ variant = 'default',
__internalRootRef,
...props
}: SideNavigationInternalProps) {
@@ -66,9 +69,15 @@ export function SideNavigationImplementation({
ref={__internalRootRef}
>
{header && (
-
+
)}
- {itemsControl &&
{itemsControl}
}
+ {!collapsed && itemsControl &&
{itemsControl}
}
{items && (
)}
diff --git a/src/side-navigation/index.tsx b/src/side-navigation/index.tsx
index ea6ff5c36c..f0a7ccfd1d 100644
--- a/src/side-navigation/index.tsx
+++ b/src/side-navigation/index.tsx
@@ -15,8 +15,16 @@ import analyticsSelectors from './analytics-metadata/styles.css.js';
export { SideNavigationProps };
-export default function SideNavigation({ items = [], ...props }: SideNavigationProps) {
- const internalProps = useBaseComponent('SideNavigation');
+export default function SideNavigation({
+ items = [],
+ expandIconPosition = 'start',
+ collapsed = false,
+ variant = 'default',
+ ...props
+}: SideNavigationProps) {
+ const internalProps = useBaseComponent('SideNavigation', {
+ props: { expandIconPosition, collapsed, variant },
+ });
const componentAnalyticMetadata: GeneratedAnalyticsMetadataSideNavigationComponent = {
name: 'awsui.SideNavigation',
@@ -30,6 +38,9 @@ export default function SideNavigation({ items = [], ...props }: SideNavigationP
{...props}
{...internalProps}
items={items}
+ expandIconPosition={expandIconPosition}
+ collapsed={collapsed}
+ variant={variant}
{...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata })}
/>
);
diff --git a/src/side-navigation/interfaces.tsx b/src/side-navigation/interfaces.tsx
index c3241d9bc5..e6f378b026 100644
--- a/src/side-navigation/interfaces.tsx
+++ b/src/side-navigation/interfaces.tsx
@@ -52,6 +52,7 @@ export interface SideNavigationProps extends BaseComponentProps {
* - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.
* - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
* our UX guidelines allow only to add a Badge and/or a "New" label.
+ * - `icon` (ReactNode) - Optional content rendered before the link text. Accepts any React node (for example, an `
` component or a custom `
`).
*
* #### Divider
* Object that represents a horizontal divider between navigation content.
@@ -65,6 +66,7 @@ export interface SideNavigationProps extends BaseComponentProps {
* - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
* Although there is no technical limitation to the nesting level,
* our UX recommendation is to use only one level.
+ * - `icon` (ReactNode) - Optional content rendered before the section title. Accepts any React node.
*
* #### Section Group
* Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.
@@ -72,6 +74,7 @@ export interface SideNavigationProps extends BaseComponentProps {
* - `type`: `'section-group'`.
* - `title` (string) - Specifies the text to display as a title of the section group.
* - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.
+ * - `icon` (ReactNode) - Optional content rendered before the section group title. Accepts any React node.
*
* #### LinkGroup
* Object that represents a group of links.
@@ -83,6 +86,7 @@ export interface SideNavigationProps extends BaseComponentProps {
* - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
* Although there is no technical limitation to the nesting level,
* our UX recommendation is to use only one level.
+ * - `icon` (ReactNode) - Optional content rendered before the link group text. Accepts any React node.
*
* #### ExpandableLinkGroup
*
@@ -95,6 +99,7 @@ export interface SideNavigationProps extends BaseComponentProps {
* - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
* Although there is no technical limitation to the nesting level,
* our UX recommendation is to use only one level.
+ * - `icon` (ReactNode) - Optional content rendered before the expandable link group text. Accepts any React node.
*/
items?: ReadonlyArray;
@@ -124,12 +129,47 @@ export interface SideNavigationProps extends BaseComponentProps {
* upon changing the `activeHref` property, this event isn't raised.
*/
onChange?: NonCancelableEventHandler;
+
+ /**
+ * Controls the placement of the expand/collapse icon for `Section` and
+ * `ExpandableLinkGroup` items.
+ * - `start` (default) - The icon is rendered before the section title.
+ * - `end` - The icon is rendered after the section title and pulled to the
+ * inline-end of a full-width header.
+ */
+ expandIconPosition?: SideNavigationProps.ExpandIconPosition;
+
+ /**
+ * If true, the navigation is rendered in a compact, icon-only state:
+ * - Item text labels and the header title are hidden.
+ * - Section, `Section group`, `Link group`, and `Expandable link group`
+ * children are not rendered.
+ * - `Items control` is not rendered.
+ * - Items without an `icon` are not rendered. Provide an icon for any
+ * item that should remain visible while collapsed.
+ *
+ * @defaultValue false
+ */
+ collapsed?: boolean;
+
+ /**
+ * Visual variant of the navigation:
+ * - `default` (default) - The active item uses a text-highlight style.
+ * - `highlighted` - The active item uses a background fill with rounded
+ * corners. Each item is padded so the background fills a comfortable area
+ * around the label and icon.
+ */
+ variant?: SideNavigationProps.Variant;
}
export namespace SideNavigationProps {
+ export type ExpandIconPosition = 'start' | 'end';
+ export type Variant = 'default' | 'highlighted';
+
export interface Logo {
- src: string;
+ src?: string;
alt?: string;
+ svg?: React.ReactNode;
}
export interface Header {
text?: string;
@@ -148,6 +188,7 @@ export namespace SideNavigationProps {
external?: boolean;
externalIconAriaLabel?: string;
info?: React.ReactNode;
+ icon?: React.ReactNode;
}
export interface Section {
@@ -155,12 +196,14 @@ export namespace SideNavigationProps {
text: string;
items: ReadonlyArray- ;
defaultExpanded?: boolean;
+ icon?: React.ReactNode;
}
export interface SectionGroup {
type: 'section-group';
title: string;
items: ReadonlyArray
;
+ icon?: React.ReactNode;
}
export interface LinkGroup {
type: 'link-group';
@@ -168,6 +211,7 @@ export namespace SideNavigationProps {
href: string;
info?: React.ReactNode;
items: ReadonlyArray- ;
+ icon?: React.ReactNode;
}
export interface ExpandableLinkGroup {
@@ -176,6 +220,7 @@ export namespace SideNavigationProps {
href: string;
items: ReadonlyArray
- ;
defaultExpanded?: boolean;
+ icon?: React.ReactNode;
}
export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;
diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx
index 484d42494a..0d6f14f89c 100644
--- a/src/side-navigation/parts.tsx
+++ b/src/side-navigation/parts.tsx
@@ -1,6 +1,6 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -13,6 +13,7 @@ import InternalIcon from '../icon/internal';
import { isPlainLeftClick, NonCancelableCustomEvent } from '../internal/events';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import Tooltip from '../tooltip/internal';
import { GeneratedAnalyticsMetadataSideNavigationClick } from './analytics-metadata/interfaces';
import { SideNavigationProps } from './interfaces';
import { hasActiveLink } from './util';
@@ -33,13 +34,18 @@ interface BaseItemComponentProps {
event: React.SyntheticEvent | Event
) => void;
position?: string;
+ expandIconPosition?: SideNavigationProps.ExpandIconPosition;
+ collapsed?: boolean;
+ // Renamed from `variant` (which is already used for the list variant) so we
+ // can plumb the SideNavigation public `variant` prop down to each link.
+ highlightVariant?: SideNavigationProps.Variant;
}
interface HeaderProps extends BaseItemComponentProps {
definition: SideNavigationProps.Header;
}
-export function Header({ definition, activeHref, fireFollow }: HeaderProps) {
+export function Header({ definition, activeHref, fireFollow, collapsed }: HeaderProps) {
checkSafeUrl('SideNavigation', definition.href);
const onClick = useCallback(
(event: React.MouseEvent) => {
@@ -62,25 +68,38 @@ export function Header({ definition, activeHref, fireFollow }: HeaderProps) {
return (
<>
-
+
- = [];
let currentListIndex = 0;
@@ -117,13 +139,53 @@ export function NavigationItemsList({
items.forEach((item, index) => {
const itemid = index + 1;
const itemPosition = `${position ? `${position},` : ''}${itemid}`;
+ // In collapsed mode, only selectable items are visible (links, link-groups, ELGs).
+ // Sections and section-groups are non-selectable containers — skip them.
+ if (collapsed && (item.type === 'section' || item.type === 'section-group')) {
+ // Flatten icon-bearing children into the current list
+ const childItems: ReadonlyArray
=
+ item.type === 'section'
+ ? (item as SideNavigationProps.Section).items
+ : (item as SideNavigationProps.SectionGroup).items.flatMap(child =>
+ child.type === 'section' ? (child as SideNavigationProps.Section).items : [child]
+ );
+ childItems.forEach((child, childIndex) => {
+ const childLink = child as
+ | SideNavigationProps.Link
+ | SideNavigationProps.LinkGroup
+ | SideNavigationProps.ExpandableLinkGroup;
+ if (!childLink.icon) {
+ return;
+ }
+ const childPosition = `${position ? `${position},` : ''}${itemid},${childIndex + 1}`;
+ lists[currentListIndex].items?.push({
+ element: (
+
+
+ ),
+ });
+ });
+ return;
+ }
+ if (collapsed && item.type !== 'divider' && !item.icon) {
+ return;
+ }
switch (item.type) {
case 'divider': {
const dividerIndex = lists.length;
lists[dividerIndex] = {
element: (
),
};
@@ -137,13 +199,19 @@ export function NavigationItemsList({
case 'link': {
lists[currentListIndex].items?.push({
element: (
-
+
),
@@ -153,7 +221,11 @@ export function NavigationItemsList({
case 'section': {
lists[currentListIndex].items?.push({
element: (
-
+
),
@@ -170,13 +245,20 @@ export function NavigationItemsList({
case 'section-group': {
lists[currentListIndex].items?.push({
element: (
-
+
),
@@ -186,13 +268,20 @@ export function NavigationItemsList({
case 'link-group': {
lists[currentListIndex].items?.push({
element: (
-
+
),
@@ -202,7 +291,11 @@ export function NavigationItemsList({
case 'expandable-link-group': {
lists[currentListIndex].items?.push({
element: (
-
+
),
@@ -219,15 +315,34 @@ export function NavigationItemsList({
}
});
+ // In collapsed mode, skip empty item segments and deduplicate consecutive dividers.
+ const filteredLists = collapsed
+ ? lists.filter((list, index) => {
+ if (list.items) {
+ return list.items.length > 0;
+ }
+ // Divider — skip if preceded by another divider or empty segment.
+ const prevVisible = lists
+ .slice(0, index)
+ .reverse()
+ .find(l => !l.items || l.items.length > 0);
+ return !prevVisible || (prevVisible.items !== undefined && prevVisible.items.length > 0);
+ })
+ : lists;
+
return (
<>
- {lists.map((list, index) => {
+ {filteredLists.map((list, index) => {
if (!list.items || list.items.length === 0) {
return (
{list.element}
@@ -239,6 +354,11 @@ export function NavigationItemsList({
key={`list-${index}`}
className={clsx(styles.list, styles[`list-variant-${list.listVariant}`], {
[styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
+ [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+ [styles['list-variant-root--symmetric']]:
+ list.listVariant === 'root' &&
+ (collapsed || expandIconPosition === 'end' || highlightVariant === 'highlighted'),
+ [styles[`expand-icon-end`]]: expandIconPosition === 'end',
})}
>
{list.items.map(item => item.element)}
@@ -253,12 +373,13 @@ export function NavigationItemsList({
interface DividerProps {
variant: 'default' | 'header';
isPresentational?: boolean;
+ collapsed?: boolean;
}
-function Divider({ variant = 'default', isPresentational = false }: DividerProps) {
+function Divider({ variant = 'default', isPresentational = false, collapsed }: DividerProps) {
return (
);
@@ -268,10 +389,61 @@ interface LinkProps extends BaseItemComponentProps {
definition: SideNavigationProps.Link;
}
-function Link({ definition, activeHref, fireFollow, position }: LinkProps) {
+interface ItemIconProps extends React.HTMLAttributes
{
+ icon: React.ReactNode;
+ collapsed?: boolean;
+}
+
+const ItemIcon = React.forwardRef(function ItemIcon(
+ { icon, collapsed, className, ...rest },
+ ref
+) {
+ if (!icon) {
+ return null;
+ }
+ return (
+
+ {icon}
+
+ );
+});
+
+// Manages a tooltip that shows the item's text label on focus or hover.
+// Used in the collapsed state, where the visible labels are hidden, to give
+// pointer and keyboard users a way to identify each item without relying on
+// their browser's native title popup.
+function useCollapsedTooltip(label: React.ReactNode) {
+ const [show, setShow] = useState(false);
+ const triggerRef = useRef(null);
+
+ const triggerProps = {
+ onFocus: () => setShow(true),
+ onBlur: () => setShow(false),
+ onMouseEnter: () => setShow(true),
+ onMouseLeave: () => setShow(false),
+ };
+
+ const tooltip = show ? (
+ triggerRef.current} content={label} position="right" onEscape={() => setShow(false)} />
+ ) : null;
+
+ return { triggerRef, triggerProps, tooltip };
+}
+
+function Link({ definition, activeHref, fireFollow, position, collapsed, highlightVariant }: LinkProps) {
checkSafeUrl('SideNavigation', definition.href);
const isActive = definition.href === activeHref;
const i18n = useInternalI18n('link');
+ const collapsedTooltip = useCollapsedTooltip(definition.text);
const onClick = useCallback(
(event: React.MouseEvent) => {
@@ -297,22 +469,33 @@ function Link({ definition, activeHref, fireFollow, position }: LinkProps) {
return (
<>
- {definition.text}
- {definition.external && (
+ {definition.text} }
+ {!collapsed && definition.external && (
)}
- {definition.info && {definition.info} }
+ {!collapsed && definition.info && (
+ {definition.info}
+ )}
+ {collapsed && collapsedTooltip.tooltip}
);
}
@@ -322,9 +505,20 @@ interface SectionProps extends BaseItemComponentProps {
variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
}
-function Section({ definition, activeHref, fireFollow, fireChange, variant, position }: SectionProps) {
+function Section({
+ definition,
+ activeHref,
+ fireFollow,
+ fireChange,
+ variant,
+ position,
+ expandIconPosition,
+ collapsed,
+ highlightVariant,
+}: SectionProps) {
const [expanded, setExpanded] = useState(definition.defaultExpanded ?? true);
const isVisualRefresh = useVisualRefresh();
+ const collapsedTooltip = useCollapsedTooltip(definition.text);
const onExpandedChange = useCallback(
(e: NonCancelableCustomEvent) => {
@@ -338,6 +532,23 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant, posi
setExpanded(definition.defaultExpanded ?? true);
}, [definition]);
+ if (collapsed) {
+ return (
+ <>
+
+
);
@@ -366,10 +590,36 @@ interface SectionGroupProps extends BaseItemComponentProps {
definition: SideNavigationProps.SectionGroup;
}
-function SectionGroup({ definition, activeHref, fireFollow, fireChange, position }: SectionGroupProps) {
+function SectionGroup({
+ definition,
+ activeHref,
+ fireFollow,
+ fireChange,
+ position,
+ expandIconPosition,
+ collapsed,
+ highlightVariant,
+}: SectionGroupProps) {
+ const collapsedTooltip = useCollapsedTooltip(definition.title);
+
+ if (collapsed) {
+ return (
+ <>
+
+
);
@@ -388,26 +640,47 @@ interface LinkGroupProps extends BaseItemComponentProps {
definition: SideNavigationProps.LinkGroup;
}
-function LinkGroup({ definition, activeHref, fireFollow, fireChange, position }: LinkGroupProps) {
+function LinkGroup({
+ definition,
+ activeHref,
+ fireFollow,
+ fireChange,
+ position,
+ expandIconPosition,
+ collapsed,
+ highlightVariant,
+}: LinkGroupProps) {
checkSafeUrl('SideNavigation', definition.href);
return (
<>