Making Dupe’s guides easier to navigate

A help page should make it easy to find an answer and move to the next relevant guide. Its navigation needs to work when the article is long, the browser window is short, or a banner takes up extra room.

In a guides-layout change for Dupe, I worked on duplicate navigation, sidebar sizing, and the desktop Guides link. These are small details, but they make a useful review exercise for any product team maintaining a help center.

Here is what I changed and the checks I would use when reviewing a similar interface.

Give the directory one place

The guides index already rendered the guide directory as its main content. The shared layout also supplied a desktop sidebar containing that navigation. On the index, the composition therefore included the same directory twice.

I added a check for the index route so the layout supplies the sidebar only on guide detail pages. The directory remains the main content of the index.

The useful distinction is what the reader is doing. On the directory page, they are choosing a topic. Inside a guide, the surrounding navigation helps them choose another article. Reusing a component makes sense; rendering it in every available space deserves a second look.

Nobody opens a help page hoping to compare two identical lists.

Give the sidebar room to stop

A sticky sidebar stays near the reader as the page scrolls. That convenience needs boundaries, especially when the navigation is taller than the available screen.

I moved the sticky behavior into an inner container, replaced the forced viewport-based height with a maximum height, and added vertical overflow handling. The outer sidebar provides the surrounding column and bottom spacing. The maximum height and top offset also account for whether the system banner is present.

The intended behavior is straightforward: a short list can stay compact, while a longer list has a way to scroll within the available space. The sidebar should stop before it collides with the footer.

CSS makes the surrounding layout matter here. MDN’s positioning reference explains how sticky positioning depends on its container and scrolling ancestors. Its overflow reference covers how content behaves when a height limit is reached. Those details are worth checking before adding another height calculation.

Choose the entry point deliberately

The desktop Guides link changed to open the first configured guide. The directory route remains available separately.

For a team reviewing this choice, the key question is what “Guides” should lead to. A clear starting article can suit a short, ordered set of instructions. A broad knowledge base may need a directory or search page as its main entrance.

The implementation takes the destination from the guide configuration, which keeps the default entry connected to that list. If the first guide changes, reviewing the navigation destination belongs in the same change.

Review the awkward cases

The change includes source checks for the routing and layout structure. Those checks inspect code patterns. Rendered behavior still needs a browser review, and I’m not presenting this as a measured usability study.

For a similar help center, I would check:

• The index shows one directory, and the main navigation opens the intended destination.
• A short desktop window still allows the last sidebar link to be reached.
• The header, optional banner, and footer leave the guide navigation usable while scrolling.
• Keyboard navigation and zoom keep links reachable and the focused item visible.

Distinct navigation regions also need meaningful labels. The W3C menu-structure guidance explains how those labels help people distinguish menus. That is a review consideration here, rather than a claim that this layout change completed an accessibility audit.

This contribution gives me a concrete implementation to explain. It doesn’t establish faster reading, fewer support requests, or better conversion. Those outcomes need their own evidence.

For your next documentation review, try opening one long guide in a short window and reaching its final navigation link with a keyboard. That small exercise can expose questions a tidy desktop screenshot leaves unanswered. You can see more of my frontend and interface work among my projects.