I have a Drawer component with 3 items. On click of 3rd item it should display new component with new Drawer, it should not be nested .

[Nikhil]

I have a Drawer component with 3 items.

Item1 
Item2
Item3

Item1, Item2 should render insider DrawerContent

but on Item3 I want to load component that has its own routing, basicallly completily new component and new Drawer component

Kindly help.

[Anislav]

The requirements you have may not follow the best UX guidelines, as it could lead to a confusing user experience. For example, once Item3 is loaded with its own DrawerContent, how would the user navigate back to the original Drawer component with the initial 3 items?

I would recommend keeping a single Drawer, and when Item3 is selected, display its related content (e.g., items 3.1, 3.2, 3.3) in a TabStrip or similar UI component.

That said, your requirements could also be implemented with nested routes and conditional rendering. This approach would check the current path to determine which Drawer component should be displayed.

Regards,
Anislav Atanasov

[Yanko]

Hello, Nikhil,

Yes, you can render a different component outside the drawer for `item3` by moving the route for it outside the DrawerContainer and wrapping the DrawerContainer in a separate Route. This way you can render `item3` separately from the DrawerContainer. I prepared an example demonstrating the above approach, that you can customize and extend with another Drawer for the `item3` component to meet your requirements:

• https://codesandbox.io/p/sandbox/naughty-panini-yjz926 

 The tricky part in this scenario is providing the correct routes to each page and managing where to render the DrawerContainer.

Feel free to ask further questions.

Regards,
Yanko
Progress Telerik