Skip to content

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

Free

Feature Cards with Icons Navigation Menu for Ark UI

A Platform Features dropdown laid out as six icon cards in two columns, each with a title and a description.

The bar shows Platform Features. The panel is two columns of cards: Lightning Fast, Enterprise Security, Advanced Analytics, Global CDN, Data Privacy, and Mobile Ready.

Use cards when each feature needs a short pitch in the header. A Card on the page is better when the pitch is the whole section. In React, Ark UI closes the open panel when you press Escape.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

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

Usage

<div className="w-full max-w-md rounded-md border bg-background p-px">
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Platform Features</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div className="grid w-[600px] max-w-full grid-cols-2 gap-3 p-2">
            {features.map((feature) => (
              <NavigationMenuLink
                asChild
                className="items-start gap-2"
                key={feature.label}
              >
                <Link href={feature.href}>
                  <feature.icon
                    aria-hidden="true"
                    className="mt-0.5 size-5"
                  />
                  <div className="flex flex-col gap-0.5">
                    <span className="font-medium">{feature.label}</span>
                    <span className="text-muted-foreground">
                      {feature.description}
                    </span>
                  </div>
                </Link>
              </NavigationMenuLink>
            ))}
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
{/* The rest of the file is under Installation. */}

FAQ

How is the grid built?

The panel is a grid-cols-2 grid with gap-3, and each cell is a NavigationMenuLink with items-start, so the icon sits at the top beside the name and description.

How are the icons rendered?

Each item's icon is a Lucide component stored in the data, rendered inside the link and hidden from assistive tech, since the label beside it names the link.

What happens on narrow screens?

The panel is w-[600px] 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. NavigationMenuLink takes asChild, and the demo puts the Next.js Link inside it.

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

Sets asChild. The rest is on the Navigation Menu page.

All 20 navigation menu examples