Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Case Studies & Testimonials Navigation Menu for Svelte

A Success Stories dropdown of four customer quotes from Vercel, Stripe, Airbnb, and Shopify, each with an avatar and five stars.

UI library: Ark UI

The bar shows Success Stories. The panel is headed CUSTOMER STORIES and shows four cards: Vercel, Stripe, Airbnb, and Shopify. Each has an avatar, five stars, a quote, and Read case study.

Put proof in the header when the quote should be seen before the customers page. A Card on that page can carry the full story. In Svelte, Ark UI closes the open panel when you press Escape.

Preview

Preview width

Installation

MCP Ā· Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Navigation Menu anatomy: list, trigger, indicator, content, link

Usage

<div class="w-full max-w-md rounded-md border bg-background p-px"><NavigationMenu><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Success Stories</NavigationMenuTrigger><NavigationMenuContent><div class="flex w-[700px] max-w-full flex-col gap-4 p-2"><h3 class="px-2 font-semibold text-muted-foreground text-sm">CUSTOMER STORIES</h3><div class="grid grid-cols-2 gap-4">{#each testimonials as testimonial (testimonial.company)}<NavigationMenuLink class="flex-col items-start gap-2">{#snippet asChild(props)}<a {...props({ href: testimonial.href })}><div class="flex items-center gap-2"><Avatar size="sm"><AvatarImage alt={testimonial.company} height={24} src={testimonial.avatarSrc} width={24} /><AvatarFallback>{testimonial.avatarFallback}</AvatarFallback></Avatar><span class="font-medium">{testimonial.company}</span><span class="flex gap-0.5">{#each stars as star (star)}<StarIcon aria-hidden="true" class="size-3 fill-warning text-warning" />{/each}<span class="sr-only">Rated 5 out of 5</span></span></div><p class="text-muted-foreground text-sm">ā€œ{testimonial.quote}ā€</p><span class="flex items-center gap-1 font-medium text-sm">Read case study<ArrowRightIcon aria-hidden="true" class="size-4 rtl:rotate-180" /></span></a>{/snippet}</NavigationMenuLink>{/each}</div></div></NavigationMenuContent></NavigationMenuItem></NavigationMenuList></NavigationMenu></div>

FAQ

What is each card?

A whole NavigationMenuLink: an Avatar with the company's logo and initials as fallback, the name, five stars, the quote and Read case study with an arrow.

How is the rating announced?

The stars are hidden from assistive tech and a visually hidden Rated 5 out of 5 follows them. They are filled with the warning token so they follow the theme.

What happens on narrow screens?

The panel is w-[700px] with max-w-full, so it never grows past the screen, but its columns get tight. Below the md breakpoint, show the same links in a Sheet or a Drawer instead.

How do the links use my router?

Each link is your router's link rendered through NavigationMenuLink, so it keeps the menu's styles and focus handling. The demo puts an anchor inside NavigationMenuLink. SvelteKit routes plain links, so that is enough.

How does the menu work from the keyboard?

Tab moves between the triggers and the links, Enter or Space opens a trigger's panel, and Escape closes it and returns focus to the trigger. The root is a nav, so screen readers list it as a navigation landmark.

How do I mark the current page?

Set aria-current="page" on the NavigationMenuLink that matches the route, and style it with the aria-[current=page]: variant.

API Reference

Navigation Menu

No extra props in this demo. The rest is on the Navigation Menu page.

Avatar

Sets size="sm", alt={testimonial.company}, height={24}, src={testimonial.avatarSrc} and width={24}. The rest is on the Avatar page.

All 20 navigation menu examples