Design and build better websites in hours, not days, with Relume Library
Sign up for free
7 days left in your trial
What's New - November, 2023
Text Editing in Site Builder, Uncommon Components & More
We've shipped new components, features and updates for November Component Day.
Relume Library only works on desktop
Switch to a desktop to start building.
Now open!
Vote on new
Relume components
Vote on what components you'd like to see added to our roadmap next month.

Navbars

A Navbar, or Navigation Bar, is a component of a website that typically appears at the top of the page and provides links to the main sections of the site. The purpose of a Navbar is to allow users to easily navigate the website and find the content they are looking for.

Design tips
  1. Keep it simple: Keep the Navbar simple and easy to use. Don't overload it with too many links or make it hard to understand.
  2. Order links by importance: Ensure your most important links are available at the high level, and links that are a level deeper are relevant and impactful to more niche users.
  3. Use clear and descriptive link text: Avoid using vague or ambiguous terms, and consider using dropdown menus for subcategories.
  4. Keep it consistent: Use a consistent style for the Navbar throughout the site. This helps to create a cohesive look and feel for the website.
  5. Make it visible: Make sure the Navbar is visible and easy to find. It should be located in a prominent position on the page, such as at the top or along the side.
  6. Use icons and graphics: Use icons or graphics to visually represent different sections of the site. This can be particularly useful for sites with many links, as it can help users quickly identify the section they are looking for.
  7. Use interactions and animations: Use hover effects or animations to make the Navbar more interactive and engaging. For example, you could use a color change or sliding effect when a user moves their cursor over a link.
  8. Make it transparent: Use a transparent or semi-transparent Navbar to create a more modern and sleek look. This can be particularly effective when combined with a full-width background image.
  9. Make it fixed: Use a fixed position Navbar that stays at the top of the screen as the user scrolls down. This can be particularly effective for sites with long pages of content, as it helps users quickly navigate to different sections.
  10. Visually structure CTAs: If you have multiple CTAs, be sure to visually structure them by level of importance, making your no.1 choice stand out.
Show more
We’ve been replaced!
Our Blog Post components have been replaced by our newly released Blog Post Header and Long Form Content Sections. This allows more flexibility and enables you to mix and match components to build the perfect blog post for your website. You can construct your own blog post pages combining these new components or if you would like a prebuilt blog post template you can use one of our Blog Post Page Templates
Long Form Content
Submit requests on Slack
Have any requests or suggestions that would make Relume Library more useful for you? Join our Slack community and share them to the channel #component-requests.
Blog Post Page Templates
Submit requests on Slack
Have any requests or suggestions that would make Relume Library more useful for you? Join our Slack community and share them to the channel #component-requests.
Filters
Clear all
Free Components
Free
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Navigation Level
Navigation Level refers to the hierarchy of Topbars and Sidebars in an application shell. See below some rules to follow:
  • A Level 3 Sidebar or Topbar should be used on its own.
  • A Level 2 Sidebar should be paired with a Level 1 Topbar.
  • A Level 1 Sidebar should be paired with a Level 2 Topbar.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Layout
Text Alignment
No items found.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Content Alignment
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Columns
No items found.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Interactions
Uses Interactions
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Uncommon
Uncommon components have more sophisticated layouts and interactions.
Uncommon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Navbar 1

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 2

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 3

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 4

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 5

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 6

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 7

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 8

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 9

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 10

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 11

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 12

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
June 1, 2022
Category
Navbars
Power ups
Examples

Navbar 13

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
September 6, 2022
Category
Navbars
Power ups
Examples

Navbar 14

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
September 6, 2022
Category
Navbars
Power ups
Examples

Navbar 15

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
September 6, 2022
Category
Navbars
Power ups
Examples

Navbar 16

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 17

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 18

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 19

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 20

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 21

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples

Navbar 22

Save
Copy
Description
Description goes here
Created by
Relume
Last updated
November 8, 2022
Category
Navbars
Power ups
Examples
Sorry, no components found
There are no components with this criteria. Try changing your search.
Request component
Submit requests on Slack
Have any requests or suggestions that would make Relume Library more useful for you? Join our Slack community and share them to the channel #component-requests.
Prev
Page
1
of
1
Next