Skip to content

WIP: add secondary navigation component#1886

Draft
edwardhorsford wants to merge 21 commits intomainfrom
add-secondary-navigation
Draft

WIP: add secondary navigation component#1886
edwardhorsford wants to merge 21 commits intomainfrom
add-secondary-navigation

Conversation

@edwardhorsford
Copy link
Copy Markdown
Contributor

@edwardhorsford edwardhorsford commented Apr 13, 2026

Description

WIP, please do not review just yet.

This introduces a new component 'secondary navigation' which is a general purpose list of links that might be used within a service. This pattern is commonly used as separate 'tabs' in a section, or filtered views of the same section.

Screenshot 2026-04-23 at 14 28 50

The styles and html are primarily inspired by Manage vaccinations in schools' code, with some changes adopting patterns from the new header component which has very similar list of links with active state.

Also supports a reverse option
Screenshot 2026-04-23 at 14 29 21

Vertical option
Screenshot 2026-04-23 at 14 31 00

Other details:

  • Supports a vertical param to force a vertical layout - useful for side nav
  • Progressively enhances with js so if there's space for horizontal links, it won't stack

@colinrotherham colinrotherham temporarily deployed to nhsuk-frontend-pr-1886 April 13, 2026 17:19 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 09:24 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 09:56 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 10:50 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 11:43 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 12:00 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 12:08 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 13:26 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 13:52 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 13:54 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 14, 2026 14:00 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 16, 2026 15:02 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 23, 2026 09:22 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 23, 2026 09:58 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 23, 2026 12:29 Inactive
@edwardhorsford edwardhorsford temporarily deployed to nhsuk-frontend-pr-1886 April 23, 2026 13:16 Inactive
@sonarqubecloud
Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
1.9% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants