Skip to content

Fix Quick Nav bug with HashRouter #2318

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
Jialecl merged 7 commits into from
Oct 27, 2025
Merged

Fix Quick Nav bug with HashRouter #2318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fcbe0ea
Added onClick to Links on Quick Nav to fix routing bug
PelayoFelgueroso Oct 22, 2025
4627e80
Add slugify to sublinks
PelayoFelgueroso Oct 22, 2025
75a8258
Add # to the url when any link or sublink is clicked on the QuickNav
PelayoFelgueroso Oct 23, 2025
985350e
Add conditional onClick Prop to be displayed only when isHashRouter p…
PelayoFelgueroso Oct 23, 2025
0ac083a
Add isHashRouter to types.ts and QuickNavCodePage
PelayoFelgueroso Oct 23, 2025
0bfeb44
Fix errors with quickNav and remove isHashRouter prop, using and inte…
PelayoFelgueroso Oct 24, 2025
d135b68
Remove unwanted file
PelayoFelgueroso Oct 24, 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
3 changes: 2 additions & 1 deletion apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ const sections = [
</td>
<td>
Links of the quick nav component. Only first and second level links will be shown in the quick nav, due to
design restrictions. Each link has the following properties:
design restrictions. The component automatically detects HashRouter usage and enables smooth scrolling
navigation when appropriate. Each link has the following properties:
<ul>
<li>
<b>label</b>: Text to be shown in the link. The content must be wrapped with an id equal to the
Expand Down
26 changes: 25 additions & 1 deletion packages/lib/src/quick-nav/QuickNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,29 @@ const Link = styled.a`

export default function DxcQuickNav({ links, title }: QuickNavTypes) {
const translatedLabels = useContext(HalstackLanguageContext);
const isHashRouter = (): boolean => {
if (typeof window === "undefined") return false;
return window.location.href.includes("/#/");
};

return (
<QuickNavContainer>
<DxcHeading level={5} text={title ?? translatedLabels.quickNav.contentTitle} />
<ListColumn>
{links.map((link) => (
<li key={link.label}>
<Link href={`#${slugify(link.label, { lower: true })}`}>
<Link
href={`#${slugify(link.label, { lower: true })}`}
onClick={
isHashRouter()
? (e) => {
e.preventDefault();
const id = slugify(link.label, { lower: true });
document.getElementById(id)?.scrollIntoView();
}
: undefined
}
>
<span>{link.label}</span>
</Link>
{link.links?.length && (
Expand All @@ -79,6 +94,15 @@ export default function DxcQuickNav({ links, title }: QuickNavTypes) {
href={`#${slugify(link?.label, { lower: true })}-${slugify(sublink?.label, {
lower: true,
})}`}
onClick={
isHashRouter()
? (e) => {
e.preventDefault();
const id = `${slugify(link.label, { lower: true })}-${slugify(sublink.label, { lower: true })}`;
document.getElementById(id)?.scrollIntoView();
}
: undefined
}
>
<span>{sublink.label}</span>
</Link>
Expand Down