-
I'm having a bit of an issue regarding in page navigation vs tabs on the following page: There's a section on this page with different event categories, ie: ( These tabs also change the route (ie The problem is Neither of these components seem to fit the box 100% - so wondering what angle should be rethought here. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary. Based on the Paste documentation, Tabs and In Page Navigation serve different purposes. Tabs are used to layer related pieces of information together and display one layer at a time on the same URL. They are used to alternate between views within the same context and do not take the user to a new URL. On the other hand, In Page Navigation is a collection of anchors that are used to switch between different, related pages. They navigate the user to a new page and trigger a full page refresh. Given your use case, it seems like you're trying to combine the behaviors of both Tabs and In Page Navigation. This is not directly supported by either component in the Paste design system. If you want to maintain the tab-like behavior but also change the route, you might need to create a custom component that combines the behaviors of both Tabs and In Page Navigation. However, this is not recommended as it could lead to confusion for the users. It's important to remember that the purpose of these components is to provide a consistent and predictable user experience. Mixing behaviors could lead to an interface that is harder to understand and use. If you need to change the route and also want to avoid a full page refresh, you might want to consider using a different navigation pattern or a different routing solution that supports this behavior. Sorry, I don't know how to help with that. Here are some similar discussions:
|
Beta Was this translation helpful? Give feedback.
-
Hey @jalexy12 Have you tried following the guidance on working with routers that appears on Anchor and Breadcrumb pages? The same theory should apply, they are all Anchors under the hood. |
Beta Was this translation helpful? Give feedback.
Correct, and nor do we in the Anchor and Breadcrumb components. If you open up the Codesandboxes in both of those links it'll show you how you get
Anchor
like components in Paste to work with a router. Each router is different and we have NextJS, Gatsby and CRA folks all over Twilio and in the Public.When ever we have an Anchor like component, all we do is give you a styled HTML anchor element as that's all we can do.
InPageNavigationItem
extends the types from an HTML anchor so in theory you should be able to copy the same implementation example on both of those pages.