navigation

package
v1.8.2 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Aug 13, 2026 License: MIT Imports: 10 Imported by: 2

Documentation

Overview

templ: version: v0.3.1020

Package navigation provides navigation components including navbars, breadcrumbs, pagination, and mobile menus.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Index

Examples

Constants

This section is empty.

Variables

This section is empty.

Functions 

func Breadcrumbs(props BreadcrumbsProps) templ.Component

Breadcrumbs renders a horizontal breadcrumb navigation 

@navigation.Breadcrumbs(navigation.BreadcrumbsProps{
   Items: []navigation.BreadcrumbItem{
     {Text: "Home", Href: "/"},
     {Text: "Users", Href: "/users"},
     {Text: "Edit", Active: true},
   },
})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/navigation"
)

func main() {
	props := navigation.BreadcrumbsProps{
		Items: []navigation.BreadcrumbItem{
			{Text: "Home", Href: "/"},
			{Text: "Products", Href: "/products"},
			{Text: "Laptops"},
		},
	}

	var buf bytes.Buffer

	_ = navigation.Breadcrumbs(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func EndOfList added in v0.15.0 

func EndOfList(props EndOfListProps) templ.Component

EndOfList renders a subtle "no more items" indicator for the bottom of a list. Pair it with LoadMore or Pagination to signal that the cursor is exhausted or the last page has been reached. 

@navigation.EndOfList(navigation.DefaultEndOfListProps())
@navigation.EndOfList(navigation.EndOfListProps{Message: "No more battles"})

func Footer(props FooterProps) templ.Component

Footer renders a site footer. Two layouts:

  1. Legacy single-row (backward compat) — when Columns is empty. Centered "© Year BrandText. All rights reserved." line.

  2. Multi-column grid — when Columns is non-empty. Responsive grid of titled link columns (`grid grid-cols-2 md:grid-cols-4 gap-8`) with an optional brand block and a BottomBar slot for legal/copyright.

    @navigation.Footer(navigation.FooterProps{BrandText: "MyApp"}) @navigation.Footer(navigation.FooterProps{ BrandText: "Acme", Columns: []navigation.FooterColumn{ {Title: "Product", Links: []navigation.FooterLink{{"Features", "/features"}}}, {Title: "Company", Links: []navigation.FooterLink{{"About", "/about"}}}, }, BottomBar: templ.Raw(`<p>© 2026 Acme</p>`), })

func IsActive added in v0.6.0 

func IsActive(href, currentPath string) bool

IsActive returns true when href matches currentPath exactly. Shared by NavLink and SidebarNav so active-state detection stays consistent across the package.

func LoadMore added in v0.7.0 

func LoadMore(props LoadMoreProps) templ.Component

LoadMore renders a centered "Load more" button for cursor-based pagination. The button uses hx-get to fetch the next batch and hx-swap="outerHTML" so the server's response (next items + updated LoadMore) replaces this button in place. The cursor is appended as a ?cursor= query parameter to the hx-get URL. 

@navigation.LoadMore(navigation.LoadMoreProps{
   Endpoint: "/api/items",
   Cursor:   nextCursor,
})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/navigation"
)

func main() {
	props := navigation.DefaultLoadMoreProps()
	props.Endpoint = "/api/items"
	props.Cursor = "eyJwYWdlIjoyfQ=="

	var buf bytes.Buffer

	_ = navigation.LoadMore(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func MobileMenu 

func MobileMenu(links []NavLinkProps, currentPath string, nonce string, menuID string, containerAware bool) templ.Component

MobileMenu renders the collapsible mobile navigation menu. menuID uniquely identifies this menu; the toggle uses the same ID so the aria-controls relationship stays valid even with multiple Navs on a page. containerAware swaps the breakpoint from viewport (sm:hidden) to container (@sm:hidden); defaults to false (viewport). 

@navigation.MobileMenu(links, "/", "", "abc123", false)

func MobileMenuToggle 

func MobileMenuToggle(show bool, menuID string, containerAware bool) templ.Component

MobileMenuToggle renders the hamburger button for mobile menus. menuID uniquely identifies the menu this toggle controls, so multiple Nav instances on one page don't collide on a hardcoded ID. containerAware swaps the breakpoint from viewport (sm:hidden) to container (@sm:hidden); defaults to false (viewport). 

@navigation.MobileMenuToggle(true, "abc123", false)

func MobileNavLink(props NavLinkProps, currentPath string) templ.Component

MobileNavLink renders a mobile-friendly navigation link 

@navigation.MobileNavLink(navigation.NavLinkProps{Href: "/", Text: "Home"}, "/")

func Nav(props NavProps) templ.Component

Nav renders a responsive navigation bar 

@navigation.Nav(navigation.NavProps{
   Brand: @myLogo(),
   Links: []navigation.NavLinkProps{
     {Href: "/", Text: "Home"},
     {Href: "/about", Text: "About"},
   },
   CurrentPath: "/",
})

func NavLink(props NavLinkProps, currentPath string) templ.Component

NavLink renders a single navigation link with active state styling 

@navigation.NavLink(navigation.NavLinkProps{Href: "/", Text: "Home"}, "/")

func Pagination 

func Pagination(props PaginationProps) templ.Component

Pagination renders a page navigation bar 

@navigation.Pagination(navigation.PaginationProps{
   CurrentPage: 3,
   TotalPages: 10,
   BaseURL: "/users",
})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/navigation"
)

func main() {
	props := navigation.PaginationProps{
		CurrentPage: 3,
		TotalPages:  10,
		BaseURL:     "/items?page=",
	}

	var buf bytes.Buffer

	_ = navigation.Pagination(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func SidebarNav added in v0.6.0 

func SidebarNav(props SidebarNavProps) templ.Component

SidebarNav renders a vertical sidebar with brand, nav links (each with an optional icon), and a footer slot. Designed for admin panels and dashboards. 

@navigation.SidebarNav(navigation.SidebarNavProps{
   Brand: templ.Raw(`<span class="font-bold text-white">MyApp</span>`),
   Items: []navigation.SidebarNavItem{
     {Label: "Dashboard", Href: "/", Icon: icons.Squares2x2, Active: true},
     {Label: "Users", Href: "/users", Icon: icons.Users},
   },
   CurrentPath: "/users",
})

func SimpleNav 

func SimpleNav(props SimpleNavProps) templ.Component

SimpleNav renders a minimal navigation with text brand 

@navigation.SimpleNav(navigation.SimpleNavProps{
   BrandText: "MyApp",
   BrandHref: "/",
   Links: []navigation.NavLinkProps{
     {Href: "/", Text: "Home"},
   },
   RightItems: @layout.ThemeToggle("Toggle theme", ""),
   CurrentPath: "/",
})

Types 

type BreadcrumbItem struct {
	Text   string
	Href   string
	Active bool
}

BreadcrumbItem represents a single breadcrumb segment 

type BreadcrumbsProps struct {
	utils.BaseProps
	Items     []BreadcrumbItem
	Separator string
	JSONLD    bool
	// BaseURL is used to resolve relative Hrefs into absolute URLs for
	// JSON-LD structured data (schema.org requires absolute URLs).
	BaseURL string
	// CurrentPath enables auto-detection of the active breadcrumb.
	// When set, the crumb whose Href matches CurrentPath is auto-highlighted.
	// Explicit Active=true on an item always takes priority.
	// When empty, active state falls back to the manual Active flag or
	// an empty Href (terminal crumb).
	CurrentPath string
}

BreadcrumbsProps configures a breadcrumb navigation component

func DefaultBreadcrumbsProps 

func DefaultBreadcrumbsProps() BreadcrumbsProps

DefaultBreadcrumbsProps returns sensible defaults

type EndOfListProps added in v0.15.0 

type EndOfListProps struct {
	utils.BaseProps
	// Message overrides the default "You've reached the end" text.
	Message string
}

EndOfListProps configures the "no more items" indicator shown at the bottom of a list when all items have been loaded (cursor exhausted, last page reached, etc.).

func DefaultEndOfListProps added in v0.15.0 

func DefaultEndOfListProps() EndOfListProps

DefaultEndOfListProps returns sensible defaults.

type FooterColumn added in v0.19.0 

type FooterColumn struct {
	Title string
	Links []FooterLink
}

FooterColumn is a titled group of links in a multi-column footer. 

type FooterLink struct {
	Text string
	Href string
}

FooterLink is one link in a FooterColumn.

type FooterProps added in v0.13.0 

type FooterProps struct {
	utils.BaseProps
	BrandText string
	// Columns renders titled link groups in a responsive grid. When non-empty,
	// switches to multi-column layout. The first column is preceded by a brand
	// block showing BrandText (if set). Empty = legacy single-row layout.
	Columns []FooterColumn
	// BottomBar renders below the columns (or below the legacy single-row when
	// Columns is empty). Use it for legal links, copyright, or fine print.
	BottomBar templ.Component
}

FooterProps configures a footer. When Columns is empty, Footer renders the legacy single-row brand+copyright layout (backward compatible). When Columns has entries, Footer renders a responsive multi-column grid with an optional brand column and a bottom bar.

func DefaultFooterProps added in v0.13.0 

func DefaultFooterProps() FooterProps

DefaultFooterProps returns sensible defaults

type LoadMoreProps added in v0.7.0 

type LoadMoreProps struct {
	utils.BaseProps
	// Endpoint is the URL the button requests via hx-get. The cursor is
	// appended as a query parameter (?cursor=...).
	Endpoint string
	// Cursor is the opaque cursor value for the next page of results.
	Cursor string
	// Label is the button text. Defaults to "Load more".
	Label string
	// InfiniteScroll, when true, adds hx-trigger="revealed" so the button
	// auto-fires when scrolled into view (infinite scroll pattern).
	InfiniteScroll bool
}

LoadMoreProps configures a "Load more" button for cursor-based pagination. The button issues an HTMX request to Endpoint with the current Cursor value. The server responds with the next batch of items plus a new LoadMore button (with the updated cursor) that replaces this one via hx-swap="outerHTML".

func DefaultLoadMoreProps added in v0.7.0 

func DefaultLoadMoreProps() LoadMoreProps

DefaultLoadMoreProps returns sensible defaults. 

type NavLinkProps struct {
	utils.BaseProps
	Href     string
	Text     string
	External bool
}

NavLinkProps configures a single navigation link

func DefaultNavLinkProps 

func DefaultNavLinkProps() NavLinkProps

DefaultNavLinkProps returns sensible defaults 

type NavProps struct {
	utils.BaseProps
	Brand       templ.Component
	Links       []NavLinkProps
	RightItems  templ.Component
	CurrentPath string
	Sticky      bool
	// ContainerAware, when true, wraps the nav in a @container div and swaps
	// sm:/lg: breakpoint classes for @sm:/@lg: so the nav responds to its
	// container width, not the viewport. Default false (viewport breakpoints).
	ContainerAware bool
}

NavProps configures a navigation bar.

Set ContainerAware: true to make the bar collapse to its hamburger menu based on its parent container's width (CSS @container) instead of the viewport. Useful when Nav is placed inside a sidebar, drawer, or other constrained layout. See ADR-0018.

func DefaultNavProps 

func DefaultNavProps() NavProps

DefaultNavProps returns sensible defaults

type PaginationProps 

type PaginationProps struct {
	utils.BaseProps
	CurrentPage uint
	TotalPages  uint
	BaseURL     string
	QueryParam  string
	MaxVisible  uint
	// ContainerAware, when true, adds @container to the nav and swaps sm:
	// breakpoint classes for @sm: so mobile/desktop controls respond to the
	// container width, not the viewport. Default false (viewport breakpoints).
	ContainerAware bool
}

PaginationProps configures a pagination component.

Set ContainerAware: true to make the mobile/desktop pagination controls respond to the parent container's width (CSS @container) instead of the viewport. Useful when Pagination is placed inside a card footer, drawer, sidebar, or other constrained layout. See ADR-0018.

func DefaultPaginationProps 

func DefaultPaginationProps() PaginationProps

DefaultPaginationProps returns sensible defaults

type SidebarNavItem added in v0.6.0 

type SidebarNavItem struct {
	Label  string
	Href   string
	Icon   icons.Name // optional; renders before the label if set
	Active bool
	// Section groups this item under a collapsible header. Items with
	// the same Section value are grouped together. Empty = ungrouped.
	Section string
}

SidebarNavItem is one link in a vertical sidebar navigation.

type SidebarNavProps added in v0.6.0 

type SidebarNavProps struct {
	utils.BaseProps
	// Brand renders at the top of the sidebar (optional).
	Brand templ.Component
	// Header renders between Brand and the nav links (optional).
	// Useful for search/filter inputs.
	Header templ.Component
	// Items are the navigation links.
	Items []SidebarNavItem
	// Footer renders at the bottom of the sidebar (optional).
	Footer templ.Component
	// CurrentPath auto-detects the active item when set. An item is active when
	// its Href matches CurrentPath. Explicit Active=true on an item takes priority.
	CurrentPath string
}

SidebarNavProps configures a vertical sidebar navigation panel.

func DefaultSidebarNavProps added in v0.6.0 

func DefaultSidebarNavProps() SidebarNavProps

DefaultSidebarNavProps returns sensible defaults

type SimpleNavProps added in v0.3.0 

type SimpleNavProps struct {
	utils.BaseProps
	BrandText string
	BrandHref string
	Links     []NavLinkProps
	// RightItems is rendered on the right side of the bar (e.g. a ThemeToggle,
	// a sign-in button, a user menu). Forwarded to Nav.RightItems. Optional.
	RightItems  templ.Component
	CurrentPath string
	Sticky      bool
}

SimpleNavProps configures a minimal navigation with a text brand

func DefaultSimpleNavProps added in v0.3.0 

func DefaultSimpleNavProps() SimpleNavProps

DefaultSimpleNavProps returns sensible defaults

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.