Sidebar Disable Navigation Item

[ehsaan-changa]

Hey ,

Is there any way to disable sidebarNavigationItem so that underline does not appear on hovering it . I just want Link only on some of the items rest i want to keep disabled .

Hope there is some way ??

[TwilioPasteBot]

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.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Remove underline in Anchor component (updated: 07/20/2022, similarity score: 84%)
• Disable Modal background overlay (updated: 03/22/2023, similarity score: 81%)
• Sidebar implementation in Next Js and Changing styles - Answer (updated: 10/23/2023, similarity score: 80%)

[dosubot[bot]]

🤖

Hello @ehsaan-changa!

This is Dosu, your friendly neighborhood bot here to assist you with your issues, answer your questions, and guide you on your journey to contribute to Paste. While we're waiting for a human maintainer to join us, I'm here to help! Let's solve this together.

Yes, you can disable the underline that appears when hovering over a SidebarNavigationItem in the Paste design system by using the textDecoration property in the CustomizationProvider component.

Here's an example of how you can do it:

<CustomizationProvider
  disableAnimations={isTestEnvironment}
  theme={currentTheme}
  elements={{
    SIDEBAR_NAVIGATION_ITEM: {
      textDecoration: "none",
      _hover: {
        textDecoration: "none",
      },
    },
    // other elements...
  }}
>
  {/* rest of your code */}
</CustomizationProvider>

Please note that SIDEBAR_NAVIGATION_ITEM is a hypothetical element name. You should replace it with the actual element name of the sidebar navigation item in your Paste design system. The actual element name for the sidebar navigation item in the Paste design system is "SidebarNavigation".

Also, please ensure that the textDecoration property is supported for customization in the Paste design system. If it's not supported, you might not be able to use this method to disable the underline.

You can find more information about this in the customization stories and the SidebarNavigation component in the Paste repository.

Let me know if you need further assistance.

Sources

• packages/paste-core/components/sidebar/stories/customization.stories.tsx
• packages/paste-website/src/components/site-wrapper/sidebar/SidebarNavigation.tsx

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @ehsaan-changa - looks like the bots have gone wild 🙄 sorry about that. SidebarNavigationItem is actually an anchor element, and disabling anchors is not an accessible practice. Can you provide some more information about why you want to disable some of the navigation links?

[ehsaan-changa]

Hey @nkrantz - Its okay no problem 😊.
Actually in my sideDrawer i only want to navigate on some of the items , rest i want to show only but not link on them. Or may be disable them.
In short i just want to convey the clients that these features will be introduced in future .

Hope this helps ?

[SiTaggart]

Hi @ehsaan-changa

That is something we have not considered and not something we saw any use cases for.

Like Nora mentioned, links can't be disabled in HTML. Technically, something that is no longer a link is just text. To achieve that though we'd need to consider its visual treatment within the sidebar as it would need to look visually different from linked items to make it accessible, which isn't something we have cycles for right now.

As a short term option I would suggest placing a "coming soon" badge in the item itself, similar to the beta badge. I believe you can just pass it as a child.

Then with the use of a JavaScript event handler, place an on click event on the item and prevent the default behaviour of the anchor element so that it doesn't go anywhere when clicked, and replace the href with a # for good measure.

[ehsaan-changa]

Hey @SiTaggart
Thanks for the reply.

Sure , will figure it out, i just wanted to know is there something already present or not .
Thanks 👍