What is being proposed?
Two new optional slot props on SidebarNav: afterNavSlot and footerSlot let consumers inject arbitrary content into the sidebar drawer alongside the generated navigation items. afterNavSlot renders inside the scrollable nav area, right after the last item; footerSlot is pinned to the bottom of the drawer, outside the scroll area, separated by a divider.
Why is this needed?
Today SidebarNav only renders items from the navigation prop, and there's no supported way to add content that isn't a generated nav item, e.g. a "Documentation" link, a "Stop all" button, a settings shortcut, or a user/account menu pinned to the bottom of the sidebar. Consumers would have to fork or wrap the component to achieve this.
What will change?
- Behaviour: Additive only, existing usage is unaffected. Also fixes the label-wrapping and full-height drawer issues described above.
- Component props:
SidebarNav gains two new optional props, afterNavSlot?: ReactNode and footerSlot?: ReactNode.
- New component: No.
- Docs/stories: Added a
WithSlots story demonstrating both slots, and made the existing NormalLinks/RouterLinks stories interactive (open/close toggle) for consistency with the other stories.
Interface changes (if any)
<SidebarNav
navigation={navigation}
open={open}
setOpen={setOpen}
afterNavSlot={<DocsLink />}
footerSlot={<UserMenu />}
/>Breaking change?
Next steps
A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.
What is being proposed?
Two new optional slot props on
SidebarNav:afterNavSlotandfooterSlotlet consumers inject arbitrary content into the sidebar drawer alongside the generated navigation items.afterNavSlotrenders inside the scrollable nav area, right after the last item;footerSlotis pinned to the bottom of the drawer, outside the scroll area, separated by a divider.Why is this needed?
Today
SidebarNavonly renders items from thenavigationprop, and there's no supported way to add content that isn't a generated nav item, e.g. a "Documentation" link, a "Stop all" button, a settings shortcut, or a user/account menu pinned to the bottom of the sidebar. Consumers would have to fork or wrap the component to achieve this.What will change?
SidebarNavgains two new optional props,afterNavSlot?: ReactNodeandfooterSlot?: ReactNode.WithSlotsstory demonstrating both slots, and made the existingNormalLinks/RouterLinksstories interactive (open/close toggle) for consistency with the other stories.Interface changes (if any)
Breaking change?
Next steps
A maintainer will review this issue.
If accepted, it will be marked as
acceptedand a PR may then be opened.