Navigating Your Site: Pages and Links

1. Setting Up Your Site's Structure: Pages and Routing

Before we can link to other pages, we need to create them. In Framer, your site's structure is managed in the Pages panel, located on the left sidebar. This is where you'll add, rename, and organize all the pages of your website. Each page you create here automatically gets its own URL path (e.g., your-site.framer.ai/about).

Activity: Create a Placeholder Page

Let's create a new page to use for our navigation links.

1. In your Framer project, find the Pages panel on the left.
2. Click the + icon next to the "Pages" title.
3. A new page will be created. Rename it to About. You can do this by double-clicking its name.
4. You now have your main Home page and a new, blank About page. This is the foundation of your site's routing.

2. The Three Core Types of Links

With our page structure initiated, let's make your navigation bar functional. In Framer, you can add a link to almost any element (text, a button, an image) by selecting it and using the Link property in the right-hand properties panel or by pressing the L key.

We'll cover three main types of links:

1. Page Links: Go to another page within your site.
2. Scroll Links: Go to a specific section on a page (often called anchor links).
3. External Links: Go to a completely different website.

The following video from Framer's official channel provides an excellent overview of creating these links. We will watch it in segments to focus on each type.

Activity: Link Your Navigation Items

1. Go to your Home page in Framer.
2. Select the text element for "About" in your navigation bar.
3. In the properties panel on the right, click the + icon next to Link.
4. In the Link To field, a dropdown will appear. Select your About page.
5. Your "About" text is now a functioning link! Preview your site by clicking the play button in the top right, and test it.

3. Styling Links for Visual Feedback

A key part of aesthetic and user-friendly design is providing clear visual cues for interactive elements. For links, this means styling their different states:

• Default: How the link looks normally.
• Hover: How the link looks when a user's cursor is over it.
• Current: How the link looks when it points to the page the user is currently on.

This systematic approach to styling ensures consistency and predictability, which aligns with your preference for rule-based design.

Activity: Create a Navigation Link Style

1. With your "About" link still selected, find the Style property within the Link settings.
2. Click it to open the Link Styles editor.
3. Create a New Style and name it nav-link.
4. Configure the states. For a minimalist aesthetic, you might try:
   • Default: Keep the text color the same as your other nav items. Set Decoration to None.
   • Hover: Change the text color to a slightly lighter or brighter shade from your palette. You could also add an Underline decoration.
   • Current: Make the color distinct to show the active page. This could be a bolder color or your primary brand accent color.
5. Apply this nav-link style to your "About" link and any other page links in your navigation.

4. Creating Scroll-to-Section (Anchor) Links

For one-page sites or long landing pages, it's common for navigation items to scroll the user to a specific section on the same page. Framer handles this with a system called Scroll Targets.

The process involves two simple steps:

1. Set the Target: Select the section (Frame or Stack) you want to scroll to and enable the Scroll Target property.
2. Create the Link: Select your button or text link and point it to the target you just created.

Let's see this in action.

Activity: Create a Scroll Link

1. On your Home page, select the main container (the Stack or Frame) for one of your sections, like "Features" or "Testimonials".
2. In the properties panel on the right, scroll down and enable Scroll Target. Give it a descriptive name like features-section.
3. Now, select the "Features" text element in your navigation bar.
4. Add a Link.
5. In the Link To dropdown, select your Home page.
6. A new Section dropdown will appear. Select the features-section target you just created.
7. Ensure the Scroll property is set to Smooth.
8. Preview your site. Clicking "Features" should now smoothly scroll you down the page.

For a more detailed written guide on Scroll Targets, including troubleshooting and best practices, the following article is an excellent resource to bookmark.

5. Finalizing Your Navigation

You've now linked text to other pages and to sections on the same page. The same principles apply to other elements. For example, your main "Call to Action" button can be linked to your Pricing page, and social media icons in your footer can be linked to external URLs. To link externally, simply paste the full URL (e.g., https://twitter.com/your-profile) into the Link To field.

A final, crucial step is to turn your navigation bar into a Component. This makes it a reusable element that you can place on every page. If you need to update a link or change a style, you only have to edit the main component, and the changes will automatically apply everywhere.

To create a navigation component:

1. Select the top-level Frame or Stack that contains all the elements of your navigation bar.
2. Right-click on it and choose Create Component.
3. Give it a name, like "Navbar".
4. You can now drag this component from the Assets panel onto any other page (like your About page) to have a consistent, fully functional navigation bar across your entire site. All the links you configured will work automatically.

Conclusion

Excellent work! You've transformed your static header into a fully interactive navigation system. This is a massive step towards creating a professional and usable website. You've not only connected your pages but also implemented smooth scrolling and consistent styling, which are key to the polished, high-performance aesthetic you're aiming for.

Key Takeaways:

• Site structure is managed in the Pages panel, which defines your page routes.
• Links can be added to any element to navigate to other Pages, external URLs, or specific Scroll Targets.
• Link Styles (Default, Hover, Current) are essential for providing visual feedback and maintaining brand consistency.
• Scroll Targets allow you to create smooth anchor links for single-page navigation.
• Turning your navigation into a Component ensures it is consistent and easy to manage across your entire website.

Preview of the Next Lesson:
Now that your site is navigable, the next step is to add more subtle layers of interactivity and polish. In our next lesson, we will explore how to add micro-interactions and animations to interactive elements using hover and pressed states. This will add a dynamic, premium feel to your buttons, cards, and other components.