question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NavItem should make text linkable and not entire list item

See original GitHub issue

Describe the issue. What is the expected and unexpected behavior? We’ve gotten some feedback that the default browser behavior which shows the URL in the bottom left corner is distracting while hovering around the navigation: image

The reason for this is because the entire box is a link and not just the text. The fact that NavExpandable is also a link adds to this issue (https://github.com/patternfly/patternfly-react/issues/4377).

In comparison to gmail, only the text is made a link while the list item is still clickable as an action. If the user wants to right click and open in a new tab, they need to do so on the link text itself. eg Inbox: image

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

See example: https://www.patternfly.org/v4/documentation/react/components/nav#default

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? enhancement

What is your product and what release version are you targeting? OpenShift Console 4.6

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
mcokercommented, Jun 23, 2020

@christianvogt I reviewed this with the larger team and we agreed this is not something we want to support at this time.

0reactions
christianvogtcommented, Jun 23, 2020

@mcoker Feel free to close this issue if PF feels the current implementation is preferred and I can take this feedback back to the originator of the issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I make the whole area of a list item in my navigation ...
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list. Share....
Read more >
How to make whole area of a list item in navigation bar is ...
When we create a navigation bar menu using list items then the whole area of the list is clickable. The whole area clickable...
Read more >
<nav>: The Navigation Section element - MDN Web Docs
The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to...
Read more >
Enhancing The Clickable Area Size - Ahmad Shadeed
This happens because the clickable area is not applied to the whole element. To make it more clear, see the below figure.
Read more >
Navs - Bootstrap
Documentation and examples for how to use Bootstrap's included navigation components.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found