navigation-shop

Navigation Shop

Store navigation whose categories open full-width flyouts of link columns and featured tiles, laid out beside, above or captioned, and fold into a tabbed menu sheet on narrow screens.

States: Default, Hover, Focus

Parts

Part	File	Does
NavigationShop	NavigationShop.vue	Shows store navigation with full-width flyouts of link columns and featured tiles, laid out beside, above or captioned, plus a mobile menu.

Styling

Part	Recipe
NavigationShop	navigation-shop-root
NavigationShop	navigation-shop-trigger
NavigationShop	navigation-shop-page
NavigationShop	navigation-shop-content
NavigationShop	navigation-shop-viewport
NavigationShop	navigation-shop-featured-image
NavigationShop	navigation-shop-caption
NavigationShop	navigation-shop-columns
NavigationShop	link
NavigationShop	hint
NavigationShop	line-title
NavigationShop	section-title

Install

Writes 3 files into components/sections/navigation-shop/. For agents, npx @frontic/ui docs navigation-shop prints this reference as markdown; the MCP server serves the same.

Installs with it: button; image; mega-menu; separator; sheet; tabs
npm packages: @lucide/vue; @vueuse/core; class-variance-authority

Built from

Button Image Mega Menu Separator Sheet Tabs

API reference

NavigationShop NavigationShop.vue

Shows store navigation with full-width flyouts of link columns and featured tiles, laid out beside, above or captioned, plus a mobile menu. Renders a <div>.

Prop	Type	Default
layout	NavigationLayout	'beside'

categories*	NavigationCategory[]	—

pages	NavigationLink[]	[]

menuLabel	string	'Open menu'

sheetTitle	string	'Navigation menu'

featuredCta	string	'Shop now'

class	ClassValue	—

open	boolean	false

menu	string	''

Event	Payload
update:open	value: boolean

update:menu	value: string

Slot	Slot props
mobile-footer	{ close: () => void; }

Recipe navigation-shop-root	Sets
base: navigation-shop-root	2 properties

Recipe navigation-shop-trigger	Sets
layout: besidedefault	8 properties · 5 inherited

layout: above	8 properties · 5 inherited

layout: captioned	6 properties

Recipe navigation-shop-page	Sets
base: navigation-shop-page	1 property

layout: besidedefault	8 properties · 5 inherited

layout: above	8 properties · 5 inherited

layout: captioned	2 properties

tone: highlight	1 property

Recipe navigation-shop-content	Sets
layout: captioned	2 properties

Recipe navigation-shop-viewport	Sets
layout: above	1 property

layout: captioned	1 property

Recipe navigation-shop-featured-image	Sets
base: navigation-shop-featured-image	1 property

layout: besidedefault	1 property

layout: above	1 property

layout: captioned	1 property

Recipe navigation-shop-caption	Sets
base: navigation-shop-caption	4 properties

Recipe navigation-shop-columns	Sets
base: navigation-shop-columns	1 property

Recipe link	Sets
base: link	3 properties

Recipe hint	Sets
base: hint	2 properties

Recipe line-title	Sets
base: line-title	2 properties

focus-ringshared state	3 properties

Recipe section-title	Sets
base: section-title	2 properties

Example