sitenav

package
v0.5.30 Latest Latest
Warning

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

Go to latest
Published: Aug 27, 2026 License: MIT Imports: 9 Imported by: 0

README

sitenav

sitenav provides a responsive header navigation bar for public websites, complete with responsive <picture> branding logos, navigation links, call-to-action components, and an accessible mobile hamburger toggle.

Usage

import (
    "github.com/tinywasm/components/actionbutton"
    "github.com/tinywasm/components/sitenav"
)

nav := &sitenav.SiteNav{
    WideLogoSrc:    "/assets/logo-wide.svg",
    CompactLogoSrc: "/assets/logo-compact.svg",
    LogoAlt:        "Clínica San José",
    Links: []sitenav.NavItem{
        {Label: "Inicio", Href: "/", Active: true},
        {Label: "Especialidades", Href: "/especialidades"},
        {Label: "Equipo Médico", Href: "/equipo"},
        {Label: "Contacto", Href: "/contacto"},
    },
    Actions: []dom.Component{
        &actionbutton.ActionButton{Text: "Reservar Cita", Variant: "primary"},
    },
}

Documentation

Index

Constants

View Source
const (
	PartBrand     = widget.Part("brand")
	PartToggle    = widget.Part("toggle")
	PartMenu      = widget.Part("menu")
	PartNav       = widget.Part("nav")
	PartLink      = widget.Part("link")
	PartActions   = widget.Part("actions")
	PartIconOpen  = widget.Part("icon-open")
	PartIconClose = widget.Part("icon-close")
)
View Source
const NameSiteNav = widget.Name("sitenav")

NameSiteNav is the widget name for sitenav.

Variables

This section is empty.

Functions

This section is empty.

Types

type NavItem struct {
	Label  string
	Href   string
	Active bool
}

NavItem represents a single link item in the site navigation bar.

type SiteNav struct {
	Element
	WideLogoSrc    string
	CompactLogoSrc string
	LogoAlt        string
	Links          []NavItem
	Actions        []Component
}

SiteNav provides the main site header with brand logo, navigation links, actions, and a responsive mobile toggle menu.

func (sn *SiteNav) IconSvg() *sprite.Sprite

IconSvg registers the hamburger menu and close icon glyphs for mobile navigation.

func (sn *SiteNav) Render() *Element
func (sn *SiteNav) RenderCSS() *css.Stylesheet

RenderCSS defines the visual stylesheet for sitenav.

func (sn *SiteNav) RenderJS() []*js.Script

RenderJS returns the vanilla JavaScript snippet responsible for the mobile menu toggle behavior and link click auto-close.

The open state is written as data-open on the MENU, which is the attribute widget.Open resolves to and the one RenderCSS selects on. It used to toggle an "is-open" class instead — a name no stylesheet in the ecosystem has ever matched, so the button flipped a class nothing read and the menu never opened. aria-expanded stays on the button: that is the assistive-technology contract, and it lives on the control, not on what it controls.

func (sn *SiteNav) WidgetKind() widget.Kind

WidgetKind is Disclosure, not Region: the markup this component already emits IS the disclosure pattern — a button carrying aria-expanded and aria-controls that shows and hides the region it names. Region has no expandable state at all (widget.Kind.Allows), so declaring it left the collapsed mobile menu inexpressible: the toggle rendered and did nothing a stylesheet could react to.

func (sn *SiteNav) WidgetName() widget.Name

Jump to

Keyboard shortcuts

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