The panel owns layout and state: navigation in a sticky column, your page in tp-navigation-panel-inset, and a trigger that toggles between them. Links are real anchors, so mark the current page with active.
Constituent Header, Footer, Trigger, ResizeRail and Inset elements are routed to their named regions when authored directly beneath the Root. slot="header", slot="footer", slot="trigger", slot="resize-rail" and slot="inset" compositions are also supported. Default content belongs to the navigation content region. These elements retain their identity and form ancestry when modes change.
compact="false" states that this is wide mode. The panel has no built-in breakpoint: set compact from your own layout logic, or give it a responsiveAdapter that observes the viewport and reports when to switch.
Collapse modes
collapse-mode="compact" collapses to an icon rail that keeps every destination reachable, with each link’s tooltip naming it. The default off-canvas slides the panel away entirely, and none keeps it open.
none makes wide toggling inert; compact mode still uses the modal Drawer. Returning to compact starts closed.
Off-canvas
Default density
Compact density
Restart from the initial state
Show the copyable source
Getting startedIntroductionInstallationTheming
Introduction
Collapse the panel to give the article the full width.
Getting startedIntroductionInstallationTheming
Introduction
Collapse the panel to give the article the full width.
Put a tp-collapsible inside an item to group sublinks under a disclosure. Each disclosure keeps its own open state, including while the panel is collapsed.
Collapsible groups
Default density
Compact density
Restart from the initial state
Show the copyable source
With compact set, the navigation moves into a modal Drawer and the trigger opens it. The same elements move across, so links, disclosure state and form fields survive the switch.
Drawer mode
Default density
Compact density
Restart from the initial state
Show the copyable source
A tp-menu can be an item’s main content, like a team switcher or account menu, or sit beside a link as its row actions. Put a tp-navigation-panel-action in the menu’s trigger slot; show-on-hover hides a row action until its item is hovered or focused, while still reserving its space.
Transient menus close at collapse/mode boundaries; disclosure and entity identity persist.
Team switcher and row actions
Default density
Compact density
Restart from the initial state
Show the copyable source
Northwind Team plan
NorthwindLumen LabsHarbor StudioProjectsWebsite refreshShare projectArchiveMobile onboardingShare projectArchivePriya Shah priya@northwind.io
ProfileBillingLog out
Website refresh
Northwind workspace
Northwind Team plan
NorthwindLumen LabsHarbor StudioProjectsWebsite refreshShare projectArchiveMobile onboardingShare projectArchivePriya Shah priya@northwind.io
ProfileBillingLog out
A responsive adapter implements observe(host, publishCompact) => cleanup. It owns its breakpoint and observation environment. Explicit compact takes precedence. The Root subscribes once; descendants never install their own media queries.
A shortcut adapter implements register(host, binding, handler) => cleanup. A binding supplies key and optional ctrlKey, metaKey, altKey, shiftKey and allowEditable (default false). Registration is scoped by the adapter. The component ignores repeated, canceled and nonmatching keys, excludes editable input unless opted in, and prevents the host default only after an accepted toggle. No global shortcut is installed by default.
A persistence adapter implements load(key) and save(key, expanded), synchronously or with Promises. Only the wide preference is loaded or saved. Controlled input takes precedence. A late load cannot overwrite an accepted session edit; disconnect or adapter replacement invalidates pending callbacks. Failures produce diagnostics and leave the accepted state usable. No cookie, localStorage or other storage write occurs without an injected adapter.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionexpandedexpandedboolean—Whether the wide navigation is expanded; set it to control the preference, then publish each accepted proposal back.default-expandeddefaultExpandedbooleantrueWhether the wide navigation starts expanded, when the panel owns that preference.compactcompactboolean | undefined—Switches to the compact Drawer presentation; leave it unset and supply a responsiveAdapter to follow the screen.compact-opencompactOpenboolean—Whether the compact Drawer is open; separate from the wide preference, and closed again whenever the panel becomes compact.openopenboolean—The same as compactOpen.collapsedcollapsedboolean—The inverse of expanded.sidesideNavigationPanelSide'inline-start'The edge the navigation sits on, following the writing direction.collapse-modecollapseModeNavigationPanelCollapseMode'off-canvas'What collapsing does on wide screens: slide the navigation away, keep a narrow icon rail, or never collapse.variantvariantNavigationPanelVariant'integrated'The surface treatment: part of the page, a floating card, or a frame around an inset page.wide-widthwideWidthstring | number'calc(var(--tp-spacing) * 64)'The width of the expanded wide navigation, as a CSS length or pixels.compact-widthcompactWidthstring | number'calc(var(--tp-spacing) * 72)'The width of the compact Drawer, as a CSS length or pixels.labellabelstring'Primary'The accessible name of the navigation and of the compact Drawer.persistence-keypersistenceKeystring | undefined—The key the persistence adapter loads and saves the preference under.
Properties
PropertyTypeDefaultDescriptionresponsiveAdapterNavigationPanelResponsiveAdapter | undefined—Decides when the panel is compact: observe(host, publish) calls publish(true) below your breakpoint and returns a cleanup. There is no built-in breakpoint.shortcutAdapterNavigationPanelShortcutAdapter | undefined—Registers the keyboard shortcut that toggles the navigation, scoped as your application decides.shortcutNavigationPanelShortcut | undefined—The key and modifiers of the toggle shortcut, such as Ctrl or Cmd with B.persistenceAdapterNavigationPanelPersistenceAdapter | undefined—Your storage for the wide preference: load(key) restores it and save(key, expanded) stores each change.onExpandedChangeNavigationPanelExpandedChangeCallback | undefined—Called with each expand or collapse proposal, as tp-value-change is dispatched.onCompactOpenChangeNavigationPanelCompactOpenChangeCallback | undefined—Called with each proposal to open or close the compact Drawer, as tp-open-change is dispatched.providerread-only—new NavigationPanelProvider(this)The state owner shared with every constituent; subscribe reports each committed state (expanded, compact, open, side, collapse mode, variant).
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<boolean>Cancelable proposal to expand or collapse the wide navigation; a controlled panel must publish the accepted expanded.tp-open-changeTpSurfaceOpenChangeEventCancelable proposal to open or close the compact Drawer.
Methods
MethodReturnsDescriptionsetExpanded(value, reason, source?)booleanProposes expanding or collapsing the wide navigation; returns whether it was accepted.setCompactOpen(value, reason, source?)booleanProposes opening or closing the compact Drawer; returns whether it was accepted.toggle(source?)booleanToggles the navigation for the current mode, as the trigger does; returns whether it was accepted.
Slots
SlotDescriptiondefaultThe navigation: content, groups and menus.headerThe top of the navigation, such as a team switcher; a Navigation panel header authored directly inside lands here.footerThe bottom of the navigation, such as the account menu; a Navigation panel footer lands here.triggerThe control that toggles the navigation; a Navigation panel trigger lands here.resize-railThe thin edge control between navigation and page that toggles it; a Navigation panel resize rail lands here.insetThe page beside the navigation; a Navigation panel inset lands here.
CSS parts
PartDescription::part(navigation-panel)The navigation surface, in the page or in the compact Drawer.::part(navigation-panel-content)The scrolling middle region of the navigation.
<tp-navigation-panel-link>
Slots
SlotDescriptiondefaultThe label. In an icon size it is hidden visually and still names the Button.icon-startA custom mark before the label, used when neither icon nor loadingPosition fills that side.icon-endA custom mark after the label, used when neither icon nor loadingPosition fills that side.
CSS parts
PartDescription::part(button)The native button or link: the target of focus, activation and the variant appearance.::part(button-label)The label; hidden visually in an icon size and when it has no content.::part(button-leading-mark)The mark before the label: the icon, the Spinner or the icon-start slot.::part(button-trailing-mark)The mark after the label: the icon, the Spinner or the icon-end slot.
<tp-navigation-panel-action>
Slots
SlotDescriptiondefaultThe label. In an icon size it is hidden visually and still names the Button.icon-startA custom mark before the label, used when neither icon nor loadingPosition fills that side.icon-endA custom mark after the label, used when neither icon nor loadingPosition fills that side.
CSS parts
PartDescription::part(button)The native button or link: the target of focus, activation and the variant appearance.::part(button-label)The label; hidden visually in an icon size and when it has no content.::part(button-leading-mark)The mark before the label: the icon, the Spinner or the icon-start slot.::part(button-trailing-mark)The mark after the label: the icon, the Spinner or the icon-end slot.
<tp-navigation-panel-trigger>
Slots
SlotDescriptiondefaultThe label. In an icon size it is hidden visually and still names the Button.icon-startA custom mark before the label, used when neither icon nor loadingPosition fills that side.icon-endA custom mark after the label, used when neither icon nor loadingPosition fills that side.
CSS parts
PartDescription::part(button)The native button or link: the target of focus, activation and the variant appearance.::part(button-label)The label; hidden visually in an icon size and when it has no content.::part(button-leading-mark)The mark before the label: the icon, the Spinner or the icon-start slot.::part(button-trailing-mark)The mark after the label: the icon, the Spinner or the icon-end slot.