Skip to content

frontend: add non-clickable section headers to the sidebar#6108

Open
Soli0222 wants to merge 2 commits into
kubernetes-sigs:mainfrom
Soli0222:section-header
Open

frontend: add non-clickable section headers to the sidebar#6108
Soli0222 wants to merge 2 commits into
kubernetes-sigs:mainfrom
Soli0222:section-header

Conversation

@Soli0222

Copy link
Copy Markdown
Contributor

Summary

This PR adds support for non-clickable sidebar section headers that plugins can register through registerSidebarEntry.

Sidebar entries with entryType: 'subheader' are rendered as section headers. Existing sidebar entries continue to render as clickable links by default, so existing registerSidebarEntry usage remains compatible.

Related Issue

Fixes #6107

Changes

  • Added an optional entryType field to sidebar entries.
  • Added support for entryType: 'subheader' in SidebarItem.
  • Render subheader entries as MUI ListSubheader when the sidebar is expanded.
  • Render subheader entries as a Divider when the sidebar is collapsed.
  • Added optional sx style overrides for subheader entries.
  • Updated registerSidebarEntry so plugins can pass entryType and sx.
  • Added tests for subheader rendering, collapsed sidebar behavior, hidden entries, and style overrides.
  • Added Storybook examples for default, collapsed, and styled section headers.
  • Updated the sidebar example plugin to show a section header followed by flat link entries at the same level.

Steps to Test

  1. Register a regular sidebar entry without entryType and confirm it still renders as a clickable link.

    registerSidebarEntry({
      parent: null,
      name: 'traces',
      label: 'Traces',
      url: '/traces',
      icon: 'mdi:chart-timeline-variant',
    });
  2. Register a sidebar entry with entryType: 'subheader' and confirm it renders as a non-clickable section header.

    registerSidebarEntry({
      parent: null,
      name: 'observability-section',
      label: 'Observability',
      entryType: 'subheader',
    });
  3. Collapse the sidebar and confirm the section header is rendered as a divider instead of text.

  4. Run the focused frontend checks.

    npm run frontend:lint
    npm run frontend:tsc
    cd frontend
    npm test -- --run src/components/Sidebar/SidebarItem.test.tsx src/components/Sidebar/useSidebarItems.test.tsx
    npm test -- --run src/storybook.test.tsx -t "Sidebar/SidebarItem"

Screenshots (if applicable)

image

Notes for the Reviewer

  • This change is opt-in. Existing sidebar entries are treated as entryType: 'link' by default.

Signed-off-by: Soli0222 <github@str08.net>
@k8s-ci-robot k8s-ci-robot added size/L Denotes a PR that changes 100-499 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Jun 20, 2026
@k8s-ci-robot

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Soli0222
Once this PR has been reviewed and has the lgtm label, please assign sniok for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

Signed-off-by: Soli0222 <github@str08.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow plugins to add non-clickable section headers to the sidebar

2 participants