Skip to content

[Feat]: Add mobile version for Navigation Component #357

@GaroGabrielyan

Description

@GaroGabrielyan

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:

  1. 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.

  2. 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

Metadata

Metadata

Labels

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions