elorm/ui

Icon Nav Link

Icon-only navigation link that expands its label on hover.

Saved preference for elorm init --ui-library base-ui
PreviewCode
"use client"

import {
  BookOpenIcon,
  GithubIcon,
  PackageIcon,
} from "lucide-react"
import { IconNavLink } from "@/components/ui/icon-nav-link"

export function IconNavLinkDemo() {
  return (
    <nav className="flex flex-wrap items-center justify-center gap-2">
      <IconNavLink href="#" label="Docs" icon={BookOpenIcon} />
      <IconNavLink href="#" label="GitHub" icon={GithubIcon} external />
      <IconNavLink href="#" label="npm" icon={PackageIcon} external />
    </nav>
  )
}

Installation#

Usage#

import { IconNavLink } from "@/components/ui/icon-nav-link"

Icon-only navigation link that expands its label on hover.

Use for compact icon rows in footers, headers, or toolbars. Pass href, label, and a Lucide icon.

Examples#

External link#

PreviewCode
import { IconNavLink } from "@/components/ui/icon-nav-link"

export function IconNavLinkDemo() {
  return (
    <IconNavLink href="https://github.com" label="GitHub" icon={GithubIcon} external />
  )
}
Mode ToggleEmpty State