Free navigation templates

This design resource represents navigation components, which are a part of XELA Dashboard UI kit. Start with full version and unlock 1900+ variants of 30 components with 50 ready-made dashboard templates.

Creating a User-Friendly Navigation With Ready-Made Templates in Figma

Designing a website or app with a user-friendly navigation can be a challenge. It's important to create an intuitive structure that makes it easy for users to find what they're looking for with minimal effort. To make this process easier, our Figma asset offers navigation templates that allow you to quickly create a well-structured navigation for your project.

Navigation templates in Figma are ready-made layouts that include all of the components necessary to build a user-friendly navigation. These templates include items such as icons, labels, drop-down menus, and more. With these templates, you can quickly create a complete navigation structure without having to design each component from scratch.

When creating a navigation template, it's important to consider the user's journey. Think about how users will interact with your website or app and what steps they need to take to get where they want to go. This will help you create a navigation structure that makes sense to them and helps them get to their desired destination quickly.

When creating a navigation template, you should also consider the visual design. Make sure that the navigation looks aesthetically pleasing and fits in with the overall look and feel of your project. You can use colors, fonts, and icons to make the navigation stand out and be more recognizable to users.

Once you've created your navigation template, you can easily export it and import it into your project. This will save you time and effort when it comes to building out a complete navigation structure for your website or app.


Creating a user-friendly navigation with ready-made templates in Figma can save you time and effort when building out a website or app.

Here are 5 key takeaways to keep in mind when creating a navigation template:

  1. Think about how users will interact with your project when creating a template.
  2. Consider the visual design of your navigation template.
  3. Use colors, fonts, and icons to make the navigation stand out and be more recognizable.
  4. Export and import the template into your project once it's complete.
  5. Test the navigation template to make sure it works as intended.
More Figma freebies
  • Messenger app desktop template UI design for FigmaMessenger app UI design for Figma
    Messenger app desktop template
    Messenger template for Figma to design the web app to communicate with different team members, create group or single chats. Dark & light.
  • Calendar & date picker UI design for FigmaCalendar & date picker templates for Figma
    Calendars & Date picker templates
    UI design resource with 56 calendars extracted from our popular UI kits. All the best samples of schedule patterns, planners, event managers.
  • Landing page template based on Zeus Web UI kitLanding page template based on Zeus Web UI kit
    Website template by Zeus UI kit
    This template contains all viewports for a landing page based on cards-driven UX. Themed with Syne and Space Grotesk free fonts.
  • Calendar & Events template for dashboard UICalendar & Events template for dashboard design
    Schedule & Events template
    This clean calendar template has been made of a scalable grid, accurately made with colored items and wrapped for the desktop.
  • Material You for dashboards & Android appsMaterial You for dashboards & Android apps
    Material You for the web
    Figma Material Design 3 starter fully loaded with several desktop & mobile templates (with dark themes) and a bundle of components.
  • Panda design system with free desktop templatePanda design system with free components
    Panda dashboard template
    Free lite version of Panda UI kit contains one dashboard template for analytics, several widgets and bunch of components to try out.
  • Web design blocks & Figma landing page templateWeb design blocks & Figma landing page template
    Landing page & web blocks
    Use given blocks as a quickstarter for your very next web design mission. This freebie contains 3 landing pages for desktop, tablet & mobile.
  • Charts UI design widgetsCharts UI design widgets
    Charts widgets Dark & Light
    Line & Wave charts, Bars, Histograms, Ratings and more graphs widgets are available in this free Figma resource. For dashboards, mobile & desktop.
  • Dark charts for FigmaDark charts for Figma
    Navigation templates
    This design resource represents navigation components. It contains sidebars, drawers and headers both in light & dark modes.
  • Dark charts for FigmaDark charts for Figma
    Dark Charts samples
    Try out this handy source of graphs for your next dashboard, pitch, or even print materials. Contains most common dark chart templates.
  • Free iOS UI kit for FigmaFree iOS UI kit for Figma
    12 free Mobile templates
    Use our Full iOS design system as the starter for your next mobile app. This freebie includes 12 screens dark & light powered by 200+ components.
  • Free Orion UI kit for FigmaFree Orion UI kit for Figma
    Orion Dataviz templates
    The design system starter for your next application. This resource contains 6 dashboard templates and a bundle of UI design widgets.
  • Free iOS UI kit for FigmaFree iOS UI kit for Figma
    Appka iOS UI kit
    Appka is a fine-themed & customized iOS design system with 4100+ variants for 28 components and 280+ ready-to-use app layouts for Figma.
  • Eclipse UI kit for FigmaEclipse UI kit for Figma
    Eclipse Admin Kit
    Fine components fully loaded with variants, auto-layout, global text & color styles. Hi-end customizable Figma design system (starter).
  • Accordion UI designAccordion UI design
    Accordion tips
    The exploration for Accordion component: styles, states, samples, and use cases for desktop & mobile viewports.
  • Mobile-X Android & iOS design systemMobile-X Android & iOS design system
    Mobile-X UI kit
    Meet Mobile-X Figma design system for mobile app design. Cross-compatible & stylish UI kit which fits both iOS / Android apps.
  • Full iOS UI kit freebieFull iOS UI kit freebie
    Free iOS UI kit
    Customisable & adjustable mobile design system with 100+ variants for a set of components and 8 ready-to-use app layouts to try out.
  • Figma React UI kit freebieFigma React UI kit freebie
    Figma React UI kit
    React UI kit designed in Figma and exported to React to build web apps faster. Based on the customised Blueprint.js React library.
  • Xela design system freebieXela design system freebie
    Xela UI kit starter
    100+ variants of several components to craft perfectly shaped desktop & mobile apps. Modern styleguides and free Nunito Sans font.
  • Charts templates for FigmaCharts templates for Figma
    Charts for Figma
    Charts UI kit made of components. Contains the most common data visualisation templates. Bars, Line charts, Heatmaps and others.
  • Rome UI kit - dashboard templatesRome UI kit - dashboard templates
    Rome UI kit lite
    Components & templates for desktop & mobile apps. Powered by clean and trendy custom guidelines and DM Sans font (OFL).
  • Radar Chart UI design inspirationRadar Chart UI design inspiration
    Radar Chart
    Radar chart template made of components and available within a range of popular viewports: desktop, tablet and mobile. Light & Dark.
  • Navigation UI design componentsNavigation UI design components
    Navigation layout
    Few variants of side Navigation Menu components crafted for Material-X design system in Figma. Badges and active state.
  • Material X design systemMaterial X design system
    Material X Starter
    Top-notch styled components in the design system powered by Auto-layout. Ready-to-use Figma UI kit with styles from the nearest future.
  • Styled Material UI kitStyled Material UI kit
    Material UI Styled
    Refreshed Material Design kit. Based on enhanced guidelines and contains an impressive amount of ready-to-use components.
    Segment UI kit
    Mobile Ui kit based on components and customised Android guidelines. Contains colors, fonts and templates ready to use for app design.
    Free iOS UI kit
    iOS native components and app templates organised into a «Most Design System» fully compatible with Human Interface guidelines.
    Figma React UI kit
    Designed and well-organised in Figma React-based UI toolkit for the web. We translated design and specs from Figma to React framework.
    Android UI kit
    8 mobile app templates based on popular Android UI design patterns: Calendar, Cards, Tasks, Kanban & Project management and more.
    Orion Templates
    Figma library with 40+ desktop charts templates served in light & dark themes. Contains 200+ of dataviz widgets for every case.
    Figma Charts kit
    Graphs templates UI kit contains the most common dataviz patterns from simple bar charts, to complicated heatmaps and financial candlesticks.
    Shopping Layout
    Contains navigation, filtering components, tabs, cards and more. This layout was made with Angular and fully coded.
    Responsive Cards
    A variety of responsive cards templates for Figma. Constrained and scalable. Made with global styles for typography and colors.
    Website Template
    Landing page template made for Figma. Contains styled components UI kit, desktop & mobile versions. Global styles, Inter, FlatUI colors.
    Email Templates
    Five awesome and scalable free email templates to engage your subscribers. Dark & light themes

    Figma iOS Starter
    Figma iOS design kit is a custom-styled library of frequent mobile patterns. Inspired by popular apps. 240+ mobile layouts included.
    iOS Datepickers
    Based on isometric angled editable text, this template feels like real and most natural iOS datepicker.

    Fonts Playground
    Best web fonts precisely handpicked and optimised for better web legibility and ready to implement into your Figma project.
    Design System Starter
    Free design system template for faster start of a project in Figma from scratch. Grid, Text Styles, Colors, Gradients, Shadows are here.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications