Navigation

GOV.UK Design System components for navigation elements such as back link, skip link, exit this page as well as breadcrumbs, service navigation and pagination.

The GOV.UK back link component to help users navigate to the previous page in a multi-page transaction.

Examples

>>> backlink = ds.BackLink(href="/back", text="Go back")
>>> str(backlink)
'<a href="/back" class="govuk-back-link">Go back</a>'
Parameters:

  • href (str) – Link to the previous page.

  • text (str, optional) – The text to display in the link. Defaults to “Back”.

  • inverse (bool, optional) – If True, applies an inverse style. Defaults to False.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML BackLink component.

Return type:

FT

GOV.UK skip link component to help keyboard-only users skip to the main content on a page.

Examples

>>> skip_link = ds.SkipLink(href="#main")
>>> str(skip_link)
'<a href="#main" data-module="govuk-skip-link" class="govuk-skip-link">Skip to main content</a>'
Parameters:

  • href (str) – On-page anchor (e.g. #main) for the main content.

  • text (str, optional) – The text to display in the link. Defaults to “Skip to main content”.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML SkipLink component.

Return type:

FT

fast_gov_uk.design_system.navigation.Breadcrumbs(*links: tuple[str, str], collapse_on_mobile: bool = False, **kwargs) → FT

GOV.UK breadcrumbs component to help users understand where they are within a website’s structure and move between levels.

Examples

>>> ds.Breadcrumbs(
...     ("Home", "/"),
...     ("Section", "/section"),
... )
# Home > Section
Parameters:

  • *links (tuple[str, str]) – Text & URL for breadcrumb links.

  • collapse_on_mobile (bool, optional) – Make breadcrumbs responsive. Defaults to False.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML Breadcrumbs component.

Return type:

FT

fast_gov_uk.design_system.navigation.ExitPage(text: str = 'Exit this page', href: str = 'https://www.bbc.co.uk/weather', **kwargs) → FT

GOV.UK exit page component to give users a way to quickly and safely exit a service, website or application.

Examples

>>> ds.ExitPage()
# An Exit this page button linking to BBC weather service.
>>> ds.ExitPage(text="Leave now", href="https://google.com")
# An Exit this page button with the text "Leave now" linking to Google.
Parameters:

  • text (str, optional) – The text to display on the ExitPage component. Defaults to “Exit this page”.

  • href (str, optional) – The URL the link points to. Defaults to BBC weather service.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML ExitPage component.

Return type:

FT

Navigation link to pass into the Navigation() component.

Examples

>>> nav_link = ds.NavigationLink(text="Home", href="/")
>>> str(nav_link)
'<li class="govuk-service-navigation__item">'
    '<a href="/" class="govuk-service-navigation__link">home</a>'
'</li>'
Parameters:

  • text (str) – Text for the NavigationLink.

  • href (str) – Link for the NavigationLink.

  • active (bool, optional) – Is the NavigationLink active? Defaults to False.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML NavigationLink component.

Return type:

FT

fast_gov_uk.design_system.navigation.Navigation(*links: FT, service_name: str = '', **kwargs) → FT

GOV.UK Service Navigation component to help users understand that they’re using your service and lets them navigate around your service.

You can pass it a list of NavigationLink() components to build the navigation menu.

Optionally, you can provide a service_name to display the name of your service on the navigation menu.

Examples

>>> nav = ds.Navigation(
...     ds.NavigationLink(text="Home", href="/", active=True),
...     ds.NavigationLink(text="About", href="/about"),
...     service_name="My Service",
... )
# *Home* | About
Parameters:

  • *links (FT) – List of NavigationLink components.

  • service_name (str, optional) – Name of the service. Defaults to “”.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML Navigation component.

Return type:

FT

Pagination link to pass into the Pagination() component.

Examples

>>> page_link = ds.PaginationLink(label="2", href="/page/2")
>>> str(page_link)
'<li class="govuk-pagination__item">'
    '<a href="/2" aria-label="Page 1" class="govuk-link govuk-pagination__link">1</a>'
'</li>'
Parameters:

  • label (str) – Label for the link.

  • href (str) – URL for the page.

  • active (bool, optional) – Is this the current page? Defaults to False.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML component.

Return type:

FT

fast_gov_uk.design_system.navigation.Pagination(*links: FT, prev_link: str = '', next_link: str = '', **kwargs) → FT

GOV.UK Pagination component to help users navigate forwards and backwards through a series of pages.

You can pass it a list of PaginationLink() components to build the Pagination.

prev_link and next_link are optional links for previous and next pages.

Examples

>>> pagination = ds.Pagination(
...     ds.PaginationLink(label="1", href="/page/1"),
...     ds.PaginationLink(label="2", href="/page/2", active=True),
...     ds.PaginationLink(label="3", href="/page/3"),
...     prev_link="/page/1",
...     next_link="/page/3",
... )
# ← Previous 1 *2* 3 Next →
Parameters:

  • *links (FT) – List of PaginationLink components.

  • prev_link (str, optional) – Link for previous page. Defaults to “”.

  • next_link (str, optional) – Link for next page. Defaults to “”.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML Pagination component.

Return type:

FT

fast_gov_uk.design_system.navigation.PaginationBlock(prev: tuple[str, str], next: tuple[str, str], **kwargs) → FT

GOV.UK block-style pagination component to let users navigate through related content that has been split across multiple pages.

Examples

>>> pagination = ds.PaginationBlock(
...     prev=("Previous page", "/previous"),
...     next=("Next page", "/next"),
... )
# ← Previous: Previous page
#   Next: Next page →
Parameters:

  • prev (tuple) – Text and Link for previous page.

  • next (tuple) – Text and Link for next page.

  • **kwargs – Additional keyword arguments.

Returns:

A FastHTML Pagination component.

Return type:

FT