Can I use this landmark navigation menu free in a commercial project?

Yes. It is free to use in commercial and personal projects.

Does the menu find page headings automatically?

No. Pass the destinations you want to expose, with an element ID for each one.

What happens if a destination is removed?

The menu resolves the target on activation and announces that the destination is unavailable when it no longer exists.

Landmark Skip Menu

A keyboard-friendly navigation menu for page landmarks and long-form content.

On this page

Field notes · Issue 08

A compact guide to choosing a field camera

A clear overview of weather sealing, lens options and the small details that make a camera dependable on long walks.

Specifications

The magnesium body weighs 680 grams and uses a weather-sealed mount. Battery life is rated for 540 frames under the standard test.

Gallery

A pair of sample photographs show the natural color response and the detail retained in shaded woodland.

Delivery

Orders leave the workshop in recyclable packaging and include a printed setup card.

Nav Landmark Skip Menu presents caller-defined destinations in a compact native disclosure, helping readers move through a long article or guide.

Each destination remains a real same-page link. Enhanced activation resolves the current target, moves focus and scrolls with reduced-motion preferences respected.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/nav-landmark-skip-menu

Usage

import { NavLandmarkSkipMenu } from "@/components/nav-landmark-skip-menu";

const landmarks = [
  { id: "intro", label: "Introduction", targetId: "article-introduction" },
  { id: "details", label: "Details", targetId: "article-details" },
];

export function ArticleNavigation() {
  return <NavLandmarkSkipMenu landmarks={landmarks} label="On this page" />;
}

Props

Prop	Type	Default	Description
landmarks	readonly LandmarkTarget[]	required	Caller-defined entries with stable ids, visible labels and target element ids. Fewer than two entries render nothing.
label	string	Jump to section	Accessible name for the disclosure and destination navigation.
className	string	undefined	Additional classes merged on the root.

Customisation

Keep destination IDs aligned with sections in the same document. The component does not scan the page or replace a site's primary skip link.

.article-section { scroll-margin-block-start: 2rem; }

Frequently asked questions

Can I use this landmark navigation menu free in a commercial project?: Yes. It is free to use in commercial and personal projects.
Does the menu find page headings automatically?: No. Pass the destinations you want to expose, with an element ID for each one.
What happens if a destination is removed?: The menu resolves the target on activation and announces that the destination is unavailable when it no longer exists.

Related components

Make long pages easier to exploreExplore more navigation patterns for your React project.Navigation components