Elements

Section link

Ruled list of full-width links with trailing arrows for section-level navigation.

Install

npx shadcn@latest add @alix/sectionLink

Preview

Services Industries Careers Annual review (PDF)

Usage

<SectionLink
  links={[
    { text: "Services", href: "/services" },
    { text: "Industries", href: "/industries" },
    { text: "Annual review (PDF)", href: "/annual-review.pdf", openInNewTab: true },
  ]}
/>

Examples

Short related list

Use a compact set when the links are peers under one page section.

Turnaround and restructuring Performance improvement Transactions and investor services

<div className="w-full max-w-lg">
  <SectionLink
    links={[
      { text: "Turnaround and restructuring", href: "/services/turnaround" },
      { text: "Performance improvement", href: "/services/performance" },
      { text: "Transactions and investor services", href: "/services/transactions" },
    ]}
  />
</div>

Document links

Set `openInNewTab` for reports and PDFs that should leave the current page in place.

Annual review (PDF)Transaction services overview (PDF)

<div className="w-full max-w-lg">
  <SectionLink
    links={[
      {
        text: "Annual review (PDF)",
        href: "/annual-review.pdf",
        openInNewTab: true,
      },
      {
        text: "Transaction services overview (PDF)",
        href: "/transaction-services.pdf",
        openInNewTab: true,
      },
    ]}
  />
</div>

Section navigation recipe

Pair SectionLink with SectionTitle in a two-column Grid for a self-contained navigation band.

Explore our capabilities

Choose the service area that best matches the engagement moment.

Turnaround and restructuring Performance improvement Investigations and disputes

<Grid columns={2} gap="xl" align="start" className="w-full max-w-4xl">
  <SectionTitle
    title="Explore our capabilities"
    description="Choose the service area that best matches the engagement moment."
    align="start"
  />
  <SectionLink
    links={[
      { text: "Turnaround and restructuring", href: "/services/turnaround" },
      { text: "Performance improvement", href: "/services/performance" },
      { text: "Investigations and disputes", href: "/services/investigations" },
    ]}
  />
</Grid>

When to use it

Use it for

Section-level related links where each row should be a full-width target.
CMS-provided link lists with plain text, href, and optional new-tab behavior.
Document or report lists that benefit from a ruled, scannable treatment.

Reach for something else

Primary navigation or filter lists — use List instead.
A single action that should look like a control — use Button instead.
Rich editorial teasers with images and excerpts — use ContentCard instead.

Props

Prop	Type	Default	Description
links	Array<{ text: ReactNode; href: string; openInNewTab?: boolean }>	—	Flat link data so a CMS list maps straight in; each row renders as one full-width anchor.
openInNewTab	boolean	false	Adds target blank plus the noopener/noreferrer guard for external or document links.