-
Notifications
You must be signed in to change notification settings - Fork 0
Description
Component
Navigation
Is your feature request related to a problem? Please describe.
We need to implement the mobile version of the Navigation component. The intended design is to reuse our existing Menu component for the mobile drawer.
However, the current Menu component has technical limitations that prevent this:
-
Missing Renderer: Unlike the Navigation component, the Menu component does not support a custom renderer prop. We cannot wrap menu items in custom logic (e.g., passing from React Router or Next.js), which is required for navigation.
-
Missing Layout Slots: The mobile design requires a "Close" button in the header and a specific "Create" action button in the footer. The current Menu component does not have slots or props to support these fixed header/footer elements.
Describe the solution you'd like
I request updates to the Menu component so it can be used as the mobile view for Navigation.
Required Changes:
-
Add itemRenderer prop: Implement a renderer prop in the Menu component (similar to Navigation) so we can pass routing components (e.g., ) to the menu items.
-
Add Header/Footer support: Add header and footer slots/props to the Menu component.
Header: Needs to support a custom Close (X) icon/button.
Footer: Needs to support a sticky footer for the "Create" button.
- Integration: Once the Menu is updated, integrate it into the Navigation component to trigger on mobile viewports.
Describe alternatives you've considered
Building a separate MobileNav component: We considered building a standalone component just for mobile navigation, but this duplicates logic. We prefer extending the existing Menu component to keep the design system DRY.
Are you able to assist to bring the feature to reality?
yes
Additional context
No response