feat(navigation-primary): unified navigation design with collapsible links menu#2825
Open
zeroedin wants to merge 61 commits intostaging/eeveefrom
Open
feat(navigation-primary): unified navigation design with collapsible links menu#2825zeroedin wants to merge 61 commits intostaging/eeveefrom
zeroedin wants to merge 61 commits intostaging/eeveefrom
Conversation
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Contributor
|
Size Change: +2.39 kB (+0.91%) Total Size: 263 kB
ℹ️ View Unchanged
|
…e summary hover states
…u below visible breakpoint
… margin to enforce 24px height
Member
|
Great work on docs @zeroedin |
marionnegp
requested changes
Feb 23, 2026
Collaborator
There was a problem hiding this comment.
- Hat tip animation should work for regular RH logo when user hovers/focuses on hat or logotype.
- Font size for subdomain name shouldn't change from 18px to 20px until the 1200px breakpoint.
- When items in the
linksslots move into the dropdown menu, their styles should change. Is this something we'd have to do on the web component side? - The "Red Hat" part of the logo should be showing in the nav at the 1200px breakpoint.
- The animation makes the hat overlap the focus ring. Can there be additional padding to avoid that?
- In the Ecosystem Catalog nav, the logo changes to the vertical version at 480px, which creates a lot of space between the logo and the hamburger. Is this a bug?
…h instead of overflow clipping
…go and secondary links
… toggle breakpoints and spacing
marionnegp
requested changes
Feb 26, 2026
Collaborator
Author
good catch fixed in: 8f3876b |
marionnegp
requested changes
Feb 27, 2026
elements/rh-navigation-primary/rh-navigation-primary-lightdom.css
Outdated
Show resolved
Hide resolved
marionnegp
approved these changes
Feb 27, 2026
Collaborator
littledezine
left a comment
littledezine
left a comment
There was a problem hiding this comment.
This is looking really good.
Wrapping a few questions internally:
- to ensure we account for the styling of primary links without dropdowns.
- questioning the use of danger orange for the log-out button color
Collaborator
Author
Content of menus is controlled by implementation as it is slotted ie: the avatar logout buttons and such in the account dropdown, it is only example code. Likely look at RHDC implementation there. Recommendations for content styles could be done via documentation. |
Collaborator
|
@KrystalMoore16 @littledezine @marionnegp @zeroedin For secondary actions, i.e. content on the right side, if we're launching with the same grouping of 1) the Summit logo, 2) three links, and 3) three utilities on every domain, which I assume is happening because this navigation is named
|
Collaborator
|
cc @dcaryll ☝️ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
<rh-navigation-primary>with changes in the unified nav design figmasub-domainboolean prop to signify that it is a sub-domain variant which includes extra styles.logo-hrefproperty to change the href on the logo. You can still override this with the slot.sub-domainslot for slotted the title and for the sub-domainTODO
implement new sub-domain stacking hat / logo at <576px breakpoint.replaced in figma with a layout shift of hamburger to the rightCloses #2812
Testing Instructions
Notes to Reviewers