Skip to content

fix(compass): restructure navigation to include home and search#7985

Merged
mcoker merged 2 commits into
patternfly:mainfrom
srambach:7930-compass-nav-restructure
Nov 11, 2025
Merged

fix(compass): restructure navigation to include home and search#7985
mcoker merged 2 commits into
patternfly:mainfrom
srambach:7930-compass-nav-restructure

Conversation

@srambach

Copy link
Copy Markdown
Member

Fixes #7930

This changes the nav structure to be
__nav __panel __nav-content __nav-home __nav-main __nav-search

NOTE: it sets the block padding of the nav element to 0 because tabs push it too tall and then the pill ends don't match the round buttons. Technically I think it's still a pixel or two off...input welcome.

ALSO: I didn't add in a home or search icon but can do that if desired and someone provides the svg code for them.

@patternfly-build

patternfly-build commented Nov 10, 2025

Copy link
Copy Markdown
Collaborator

@srambach srambach requested a review from mcoker November 10, 2025 18:33

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Left a comment about separating the panel padding vars
  • Also would you mind taking the inset variation off of the tabs and adding a lg spacer as left/right padding to __nav-main? That's a little less space and it still looks ok.
  • And attaching the home and search icons. I grabbed them from figma and edited them without testing to make sure they work. They should just need width/height of 1em, class .pf-v6-svg and any fill colors set to currentcolor

icons.zip

}

.#{$compass}__nav {
--#{$compass}__panel--Padding: 0 var(--#{$compass}__nav--Padding); // assumes there are tabs pushing the height enough not to need block padding on the home/search buttons

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably separate __panel--Padding into the 4 sides. Do you mind doing that in this PR? The only other place you'd need to update the use of __panel--Padding is the sidebar padding here - https://github.com/srambach/patternfly/blob/432fb30ea563b5f069002910420b37e57e263d85/src/patternfly/components/Compass/compass.scss#L98.

@mcoker

mcoker commented Nov 11, 2025

Copy link
Copy Markdown
Contributor

Also looks like you need to rebase. Probably just need to remove compass__hero since it's a standalone component now.

@srambach srambach force-pushed the 7930-compass-nav-restructure branch from 432fb30 to 298fb3a Compare November 11, 2025 16:35

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfecto!

@mcoker mcoker merged commit 59663e5 into patternfly:main Nov 11, 2025
4 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.5.0-prerelease.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tabs/Nav - structure needs to support more than just nav items

3 participants