navigation

package
v0.2.0 Latest Latest
Warning

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

Go to latest
Published: Jun 8, 2026 License: MIT Imports: 9 Imported by: 2

Documentation

Overview

templ: version: v0.3.1036

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

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

templ: version: v0.3.1036

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 Footer(brandText string) templ.Component

Footer renders a simple footer

@navigation.Footer("MyApp")

func MobileMenu

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

MobileMenu renders the collapsible mobile navigation menu

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

func MobileMenuToggle

func MobileMenuToggle(show bool) templ.Component

MobileMenuToggle renders the hamburger button for mobile menus

@navigation.MobileMenuToggle(true)
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 SimpleNav

func SimpleNav(brandText, brandHref string, links []NavLinkProps, currentPath string) templ.Component

SimpleNav renders a minimal navigation with text brand

@navigation.SimpleNav("MyApp", "/", []navigation.NavLinkProps{
   {Href: "/", Text: "Home"},
}, "/")

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
}

BreadcrumbsProps configures a breadcrumb navigation component

func DefaultBreadcrumbsProps

func DefaultBreadcrumbsProps() BreadcrumbsProps

DefaultBreadcrumbsProps 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
}

NavProps configures a navigation bar

func DefaultNavProps

func DefaultNavProps() NavProps

DefaultNavProps returns sensible defaults

type PaginationProps

type PaginationProps struct {
	utils.BaseProps
	CurrentPage int
	TotalPages  int
	BaseURL     string
	QueryParam  string
	MaxVisible  int
}

PaginationProps configures a pagination component

func DefaultPaginationProps

func DefaultPaginationProps() PaginationProps

DefaultPaginationProps returns sensible defaults

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL