Active

Overview
Docs
Updates

Sprout Active makes it simple to control the active classname in your navigation or conditional content based on your URL segments or your full URL.

Managing Navigation and Selected States #

Sprout Active provides two Twig Filters, active() and activeClass(), to test for matching URL segments and output a class to make an element active.

By default, the activeClass() filter tests for the first URL segment against your matching copy, and outputs the string: class="active"

For example, the most simple version of these filters will match the first segment in the URL http://example.com/about-us. If no match is found, they will return blank.

{{ active('about-us') }}

{{ activeClass('about-us') }}

{{ activeClass(entry.slug) }}

To target your home page, you can just reference a blank value. This example will match the home page URL http://example.com.

{{ active('') }}

{{ activeClass('') }}

Targeting a different URL segment #

To target other parts of your URL, pass the number of the URL segment you want to match as the second argument in the active or activeClass functions.

This example will look for a match in the second segment of the URL http://example.com/about/meet-the-team.

{{ active('meet-the-team', 2) }}

{{ activeClass('meet-the-team', 2) }}

Using a different class name #

If you prefer to use a different class name, you can provide the class you want to use as the third argument in the active and activeClass functions.

This example, will look for a match in the first segment of your URL, and return the text highlight for the active function and class="highlight" for the activeClass function.

{{ active('about-us', 1, 'highlight') }}

{{ activeClass('about-us', 1, 'highlight') }}

Testing for multiple values #

In a situation where you need to test for multiple values, you can use the pipe delimiter.

This example will find a match if the first segment is either 'about-us' or 'meet-the-team'.

{{ active('about-us|meet-the-team') }}

{{ activeClass('about-us|meet-the-team') }}

Targeting the Full URL #

Sometimes, such as when using Structure sections, you may need to target the full URL. In these cases, instead of passing a segment number you can pass the keyword url. In the following code, if the page.url variable matches the current page url, the

{{ active(page.url, 'url') }}

{{ activeClass(page.url, 'url') }}

And, just for good measure, if you need to target only the part of the URL that comes after the domain (the path), you can target it specifically too:

{{ active('blog/my-first-blog-post', 'path') }}

{{ activeClass('blog/my-first-blog-post', 'path') }}

Sometimes you may need something more descriptive than just a generic active state. If you need to use a URL segment as a class name, you can use the segment function:

{{ segment(2) }}

This will get us the same result as using the craft.request tag:

{{ craft.request.getSegment(2) }}

Using the active filter to conditionally display content #

Sprout Active also provides us a short syntax to use for conditional statements. The following code will return content when the third segment doesn't exist.

{% if active('', 3) %} ... {% endif %}

Doing this is the same as using the craft.request tag:

{% if craft.request.getSegment(3) %} ... {% endif %}

To give a second example, the following code will return content when the third segment matches "overview".

{% if active('overview', 3) %} ... {% endif %}

We can achieve the same result using the native craft.request variable:

{% if craft.request.getSegment(3) == "overview" %} ... {% endif %}

We can also check for a path or full URL in a conditional:

{% if active(page.url, 'url') %} ... {% endif %}

{% if active('blog/my-first-blog-post', 'path') %} ... {% endif %}

Craft Services

Optimize Craft CMS to improve your workflows, impress your users, and acheive your business goals.

We have over 20,000 hours of Craft experience and work in close collaboration with businesses, agencies, and individuals to help make Craft CMS the best platform for you and your business. Save time and build a website that respects best practices and is designed to be scalable, maintainable, and grow with your online business and marketing needs.

Let's talk

Bring it on

  • Project Planning
  • Content Architecture
  • Data Migrations
  • Performance Optimization
  • API Integrations
  • Monthly Analysis
  • Digital Marketing Strategy

Make your life easier, your customers happy, and your business run more smoothly.

On top of our experience with the Sprout Plugin Suite, we’ve designed and built numerous custom plugins to help organizations address unique business and marketing challenges. From custom workflows to e-commerce to deep API integrations with customer databases, analytics, and cloud services, we can help build custom plugins suited to your specific needs.

Let's talk

Make things better

  • Custom Tooling
  • Improved Workflows
  • API Integrations
  • CRM Integrations
  • Email Marketing
  • Lead Generation Forms
  • E-Commerce & Donations

Spend more time focused on your business. We’ll spend the time to focus on your website.

Maintaining your website, content strategy, and customer relationships have a large impact on your business. Whether you’re a business owner, marketing director, or content author, we can help keep things running smoothly. We offer on-call and monthly retainer services to help you answer burning questions, fix annoying bugs, update software, monitor analytics, and even come running if there’s a fire.

Let's talk

We've got your back

  • General questions
  • Design changes
  • Bugfixes
  • Craft updates
  • Plugin updates
  • Coaching and Training

Build your roadmap to improve performance, usability, and identify new business opportunities.

Curious how your Craft website stacks up against all the other Craft sites out there? As a digital agency and CMS specialists who have worked with Craft since day one, our team can provide you insight into everything from content architecture to code debt. Request an audit to learn about optimization opportunities and provide a path for your business to create a better user experience and a more targeted digital strategy.

Request an Audit

Know where you stand

  • Craft Best Practices
  • Usability Audits
  • Code Audits
  • Security Audits
  • Server Audits
  • SEO Audits