component

TuxSiteNav · TuxDropdown · TuxMegaMenu

Institutional top-bar with identity lockup + primary nav. Each primary item can be a plain link, a TuxDropdown (single column of links), or a TuxMegaMenu (multi-column panel with optional featured tile). Optional utility strip above + search trigger. Five AggieUX site types (University / Center / Department / Application+nav / Application-only) all express via composition rather than a "type" prop.

canonical · university site

Utility nav + identity nav with mega menu + dropdown

Hover or focus the Research entry for the full-width mega panel; About reveals a single-column dropdown. Both close on Escape and click-outside.

Texas A&M Transportation Institute
(Page content — interact with the nav above.) 
<TuxSiteNav
  :identity="{ level: 'institution', name: 'Texas A&M Transportation Institute', href: '/' }"
  :utility-nav="[
    { label: 'Apply',   to: '/apply' },
    { label: 'Visit',   to: '/visit' },
    { label: 'Give',    to: '/give' },
  ]"
  search
  :primary-nav="[
    { label: 'Research', megaMenu: { columns: [...], featured: {...} } },
    { label: 'About',    dropdown: [...] },
    { label: 'News',     to: '/news' },
  ]"
/>

application chrome

Internal product header

Department-level identity, no utility strip, simpler primary nav. Pattern for Landscape, tti-ai-studio, and other internal IT product surfaces.

Texas A&M Transportation InstituteLandscape
(Application body.)

dropdown · standalone

TuxDropdown alone (no SiteNav)

TuxDropdown can also stand alone for inline-content "more actions" patterns or in custom navigation layouts that don't need the full TuxSiteNav scaffold.

props

Props reference

TuxSiteNav

  • identity — TuxIdentity props (level, name, href, etc). Required.
  • primaryNav — array of { label, to?, href?, dropdown?, megaMenu? }. Each item is one of: plain link / dropdown trigger / mega-menu trigger.
  • utilityNav — small upper-strip links. Optional.
  • search — show a search trigger in the utility bar (emits @search:open).
  • sticky — pin the entire nav at the top of the viewport.

TuxDropdown

  • label — trigger label. Required.
  • items — array of { label, to?, href?, description? }.

TuxMegaMenu

  • label — trigger label. Required.
  • columns — array of { heading, items }.
  • featured — optional { eyebrow?, title, description?, to?, href?, image? } for the right-rail tile.