Skip to content

feat: Added Tab updates for site Navigation #12111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 5, 2025
Merged

feat: Added Tab updates for site Navigation #12111

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0dadec6
feat: Added updates for site Navigation
dlabaj Nov 3, 2025
142c8ba
Update packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx
dlabaj Nov 4, 2025
f788a6f
Updated with changes to allow a div to be set when using isNav.
dlabaj Nov 4, 2025
58d388e
Updated the code with feedback from reviews.
dlabaj Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,7 +529,7 @@ class Tabs extends Component<TabsProps, TabsState> {
const overflowingTabProps = filteredChildrenOverflowing.map((child: React.ReactElement<TabProps>) => child.props);

const uniqueId = id || getUniqueId();
const Component: any = component === TabsComponent.nav ? 'nav' : 'div';
const Component: any = component === TabsComponent.nav || isNav ? 'nav' : 'div';
Copy link
Contributor

@thatblindgeye thatblindgeye Nov 4, 2025

Choose a reason for hiding this comment

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

@mcoker to get this to work as discussed - where you can override the wrapper element when isNav is true by passing component="div" - we'd have to remove the default value of the component prop from the defaultProps and replace it around here. This is because component is defaulted to a div, and if we say "make this element a nav when isNav is true, except when the component is passed div as a value" then that just happens by default so a consumer would also have to pass component="nav"

Technically everything should remain the same - Tabs will default to a div wrapper as they currently do on Org examples - main thing is that the props table would no longer show the div being the default value in the table cell.

If we still want to allow isNav to dictate the nav modifier class being applied AND the wrapper element defaulting to a nav element, what I did locally was (all in Tabs.tsx file):

  • Remove the default component value on line ~209
  • throww const defaultComponent = isNav && !component ? 'nav' : 'div'; above the const Component line on ~532
  • update the logic for the compnent to component === TabsComponent.nav || (isNav && component !== 'div') ? 'nav' : defaultComponent

(all this could be cleaned up I'm sure)

Copy link
Contributor

@kmcfaul kmcfaul Nov 4, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

+1 to let component override the wrapper even when isNav is passed in. But can be done in a follow up if the above solution ends up complicated.

const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;

const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;
Expand Down
8 changes: 8 additions & 0 deletions packages/react-core/src/components/Tabs/examples/Tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,14 @@ Subtabs can also link to nav elements.

```

### Tabs used for site navigation

Site navigation tabs

```ts file="./TabsSiteNav.tsx"

```

### With separate content

If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.
Expand Down
35 changes: 35 additions & 0 deletions packages/react-core/src/components/Tabs/examples/TabsSiteNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { useState } from 'react';
import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';

export const TabsSiteNav: React.FunctionComponent = () => {
const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
// Toggle currently active tab
const handleTabClick = (
event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
tabIndex: string | number
) => {
setActiveTabKey(tabIndex);
};
return (
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} isNav={true} aria-label="Tabs in the nav element example">
<Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
Users
</Tab>
<Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
Containers
</Tab>
<Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
Database
</Tab>
<Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
Disabled
</Tab>
<Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
ARIA Disabled
</Tab>
<Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
Network
</Tab>
</Tabs>
);
};
Loading