Navigation¶

Navigation components help users move through the application. They range from global site navigation to page-specific actions and breadcrumbs.

Most navigation menus consist of a wrapper component and multiple item components.

Use nav and nav_item for generic navigation menus.

{%- call ui.util.call(ui.nav) -%}
    {{ ui.nav_item(_("Home"), href="/") }}
    {{ ui.nav_item(_("Datasets"), href="/dataset") }}
    {{ ui.nav_item(_("Organizations"), href="/organization") }}
{%- endcall %}

Parameters for nav

Parameter	Type	Description
`content`	any	Generic navigation

Parameters for nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked
`active`	bool	Whether this navigation item represents the current page

The primary navigation usually found in the header.

Example

{%- call ui.util.call(ui.main_nav) -%}
    {{ ui.main_nav_item(_("Datasets"), href=h.url_for("dataset.search")) }}
    {{ ui.main_nav_item(_("Organizations"), href=h.url_for("organization.index")) }}
    {{ ui.main_nav_item(_("Groups"), href=h.url_for("group.index")) }}
{%- endcall %}

Parameters for main_nav

Parameter	Type	Description
`content`	any	Header navigation items

Parameters for main_nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked
`active`	bool	Whether this navigation item represents the current page

{%- call ui.util.call(ui.account_nav) -%}
    {{ ui.account_nav_item(_("Profile"), href=h.url_for("user.profile")) }}
    {{ ui.account_nav_item(_("Settings"), href=h.url_for("user.settings")) }}
    {{ ui.account_nav_item(_("Logout"), href=h.url_for("user.logout")) }}
{%- endcall -%}

User-specific links like "Profile", "Settings", or "Logout".

Parameters for account_nav

Parameter	Type	Description
`content`	any	Account navigation items

Parameters for account_nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked
`active`	bool	Whether this navigation item represents the current page

sidebar_nav is used for sidebar menus, while content_nav is often used for tabs within a specific entity page (e.g., Dataset tabs).

{%- call ui.util.call(ui.sidebar_nav) -%}
    {{ ui.sidebar_nav_item(_("Overview"), href=h.url_for("dataset.read", id=package.id)) }}
    {{ ui.sidebar_nav_item(_("Resources"), href=h.url_for("dataset.resources", id=package.id)) }}
    {{ ui.sidebar_nav_item(_("Activity"), href=h.url_for("dataset.activity", id=package.id)) }}
{%- endcall -%}

Parameters for sidebar_nav

Parameter	Type	Description
`content`	any	Sidebar navigation

Parameters for sidebar_nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked
`active`	bool	Whether this navigation item represents the current page

Specialized navigation for the footer area.

{%- call ui.util.call(ui.footer) -%}
    {%- call ui.util.call(ui.footer_main_nav) -%}
        {{ ui.footer_main_nav_item(_("Home"), href="/") }}
        {{ ui.footer_main_nav_item(_("Datasets"), href="/dataset") }}
        {{ ui.footer_main_nav_item(_("Organizations"), href="/organization") }}
    {%- endcall -%}
    {%- call ui.util.call(ui.footer_secondary_nav) -%}
        {{ ui.footer_secondary_nav_item(_("Contact Us"), href="/contact") }}
        {{ ui.footer_secondary_nav_item(_("Privacy Policy"), href="/privacy") }}
    {%- endcall -%}
{%- endcall %}

Primary links in the footer rendered by wrapper footer_main_nav and collection of footer_main_nav_item.

Parameters for footer_main_nav

Parameter	Type	Description
`content`	any	Footer main navigation items

Parameters for footer_main_nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked

Less prominent links in the footer, often for legal or support pages. Rendered by wrapper footer_secondary_nav and collection of footer_secondary_nav_item.

Parameters for footer_secondary_nav

Parameter	Type	Description
`content`	any	Footer secondary navigation items

Parameters for footer_secondary_nav_item

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked

Actions¶

Actions are prominent links or buttons used to perform operations on the current page or entity.

Page Actions¶

Page-level actions like "Add Dataset".

{%- call ui.util.call(ui.page_action_wrapper) -%}
    {{ ui.page_action(_("Add Dataset"), href=h.url_for("dataset.new") , style="primary") }}
{%- endcall -%}

Parameters for page_action_wrapper

Parameter	Type	Description
`content`	any	Page-level actions

Parameters for page_action

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked

Content Actions¶

Entity-level actions like "Edit", "Manage", or "Delete".

{%- call ui.util.call(ui.content_action_wrapper) -%}
    {{ ui.content_action(_("Edit"), href=h.url_for("dataset.edit", id=package.id)) }}
    {{ ui.content_action(_("Manage"), href=h.url_for("dataset.manage", id=package.id)) }}
    {{ ui.content_action(_("Delete"), href=h.url_for("dataset.delete", id=package.id), style="danger") }}
{%- endcall -%}

Parameters for content_action_wrapper

Parameter	Type	Description
`content`	any	Content-level actions

Parameters for content_action

Parameter	Type	Description
`content`	any	Navigation item label
`href`	str	URL to navigate to when the navigation item is clicked

Breadcrumbs¶

Breadcrumbs show the user's location in the site hierarchy.

Example

{%- call ui.util.call(ui.breadcrumb_wrapper) -%}
    {{ ui.breadcrumb(_("Home"), href="/", initial=true) }}
    {{ ui.breadcrumb(_("Datasets"), href="/dataset") }}
    {{ ui.breadcrumb(package.title, active=true) }}
{%- endcall %}

Parameters for breadcrumb_wrapper

Parameter	Type	Description
`content`	any	Breadcrumb fragments

Parameters for breadcrumb

Parameter	Type	Description
`content`	any	Breadcrumb label
`href`	str	URL to navigate to when the breadcrumb item is clicked
`initial`	bool	Whether this is the initial breadcrumb item, typically the home page
`active`	bool	Whether this breadcrumb item represents the current page

Pagination¶

Pagination controls for moving between pages of results. Can be rendered via single pagination component in most cases.

{{ ui.pagination(page=2, total_pages=5) }}

Parameters for pagination

Parameter	Type	Description
`page`	int	Current page number
`total`	int	Total number of pages
`url_generator`	callable	Function that generates a URL for a given page number, used to create links for the pagination controls
`padding`	int	Number of page links to show on each side of the current page
`hide_edges`	bool	Whether to hide the "first" and "last" page links
`hide_siblings`	bool	Whether to hide the "next" and "previous" page links
`start_label`	str	Label for the "first" page link
`end_label`	str	Label for the "last" page link
`previous_label`	str	Label for the "previous" page link
`next_label`	str	Label for the "next" page link
`padding_label`	str	Label for the padding links (e.g. "...")
`url_params`	dict[str, str]	Additional URL parameters to include in the generated URLs for the pagination links

When custom pager required, low-level components pagination_wrapper and pagination_item can be used.

{%- call ui.util.call(ui.pagination_wrapper) -%}
    {{ ui.pagination_item(_("Previous"), href="#", disabled=true) }}
    {{ ui.pagination_item("1", href="#", active=true) }}
    {{ ui.pagination_item("2", href="#") }}
    {{ ui.pagination_item("3", href="#") }}
    {{ ui.pagination_item(_("Next"), href="#") }}
{%- endcall -%}

Parameters for pagination_wrapper

Parameter	Type	Description
`content`	any	Pagination controls

Parameters for pagination_item

Parameter	Type	Description
`content`	any	Page number or label for the pagination item
`href`	str	URL to navigate to when the pagination item is clicked
`active`	bool	Whether this pagination item represents the current page

Dropdowns¶

dropdown component provides a toggleable menu.

{%- call ui.util.call(ui.dropdown, label=_("Actions")) -%}
    {{ ui.dropdown_item(_("Edit"), href=h.url_for("dataset.edit", id=package.id)) }}
    {{ ui.dropdown_item(_("Manage"), href=h.url_for("dataset.manage", id=package.id)) }}
    {{ ui.dropdown_item(_("Delete"), href=h.url_for("dataset.delete", id=package.id), style="danger") }}
{%- endcall -%}

Parameters for dropdown

Parameter	Type	Description
`content`	any	Content of the dropdown menu
`title`	str	Text shown in the dropdown trigger element

Parameters for dropdown_item

Parameter	Type	Description
`content`	any	Dropdown item label
`href`	str	URL to navigate to when the dropdown item is clicked

Tabs¶

Tabs are used to organize content into different panes within the same page.

Tabbed Content¶

A high-level wrapper that can handle both the tab handles and the panes.

{%- call ui.util.call(ui.tabbed_content) -%}
    {% call ui.util.call(ui.tab_wrapper) -%}
        {{ ui.tab(_("Overview"), active=true) }}
        {{ ui.tab(_("Resources")) }}
        {{ ui.tab(_("Activity")) }}
    {%- endcall -%}

    {%- call ui.util.call(ui.tab_pane_wrapper) -%}
        {{ ui.tab_pane("Overview content here", active=true) }}
        {{ ui.tab_pane("Resources content here") }}
        {{ ui.tab_pane("Activity content here") }}
    {%- endcall -%}
{%- endcall -%}

Parameters for tabbed_content

Parameter	Type	Description
`content`	any	Collection of tabs

Low-level Tab Components¶

Use these for more control over tab layout.

Tab navigation itself consists of a wrapper (tab_wrapper) and individual tab handles (tab)

{%- call ui.util.call(ui.tab_wrapper) -%}
    {{ ui.tab(_("Overview"), active=true) }}
    {{ ui.tab(_("Resources")) }}
    {{ ui.tab(_("Activity")) }}
{%- endcall -%}

Parameters for tab_wrapper

Parameter	Type	Description
`content`	any	Collection of tabs

Parameters for tab

Parameter	Type	Description
`content`	any	Tab label
`href`	str	URL to navigate to when the tab is clicked. If not specified, tab will not be a link.
`active`	bool	Whether this tab is currently active
`id`	str	Unique identifier for the tab, used to associate it with the corresponding tab content element

Tab panes are rendered using tab_pane_wrapper and individual panes with tab_pane.

{%- call ui.util.call(ui.tab_pane_wrapper) -%}
    {{ ui.tab_pane("Overview content here", active=true) }}
    {{ ui.tab_pane("Resources content here") }}
    {{ ui.tab_pane("Activity content here") }}
{%- endcall -%}

Parameters for tab_pane_wrapper

Parameter	Type	Description
`content`	any	Collection of tab panes

Parameters for tab_pane

Parameter	Type	Description
`content`	any	Content of the pane
`active`	bool	Whether this pane is currently visible
`id`	str	Unique identifier for the pane, used to associate it with the corresponding tab handle

Navigation¶

Menu Navigation¶

Generic Navigation¶

Main Site Navigation¶

Account Navigation¶

Sidebar & Content Navigation¶

Footer Navigation¶

Main footer navigation¶

Secondary footer navigation¶