Figma Navigation

Preview

Figma Navigation

Figma Navigation Template

Navigation blocks help users find content on your website. They should always include your company logo and adapt to different screen resolutions, promoting healthy exploration and interaction with your website.

Navigation blocks are part of the Figma Website Builder. This component allows you to quickly assemble websites with Figma Sites.

How to use Navigation in Figma

Choose simple, descriptive labels that match user expectations—think “Home,” “Profile,” or “Settings,” not jargon or vague verbs.
Test your navigation at each breakpoint and ensure menu and links adapt across layouts.
Use sticky position on navigation so it stays visible and active as users scroll.
Ensure tap areas are always clickable. The UI Kit's default parameters for components are set at 44px. When customizing the navigation, don't go too much below or above this limit.

Navigation Anatomy

Set	Variants	Properties
Navigation	3	Size Desktop, Tablet, Mobile

The Navigation block is one set of three variants — Desktop and Tablet at 68px and Mobile at 56px — a responsive website header with logo, links and actions that stays sticky and keeps tap targets at the kit's defaults.

Navigation AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a website navigation block in Figma in Desktop, Tablet and Mobile sizes. Desktop at 68px: the logo on the left, a centred or left-aligned row of five text links with one carrying a chevron that opens a dropdown panel, and a right group with a Log in ghost button and a Get started primary button. Tablet at 68px: the same bar with the link row trimmed to four and the ghost button dropped. Mobile at 56px: logo on the left, a burger icon on the right, and a full-screen menu variant that lists the links as tall rows with the two buttons stacked at the bottom. Add a Sticky Boolean that adds a bottom border and a subtle shadow for the scrolled state, and a Transparent Boolean for use over a hero image with white text. Keep every link and button a nested kit instance with hover states, maintain at least 44px tap areas on mobile rows, and wire the burger to the menu variant in the prototype with a slide-down transition.

Source