Back to updates
Enhancement
Designer

New in-product navigation

We are updating our in-product navigation to streamline collaboration and productivity as Webflow's product continues to evolve.

New in-product navigation

<p id="">As Webflow’s product, and the teams building with it, continue to grow and evolve, we are updating our in-product navigation to make it easier for all Webflow users to access their mission-critical workflows across our expanding set of products and features.&nbsp;<strong id="">We will start rolling this new experience out to customers starting Tuesday, November 19th and expect all customers to have access by early December.</strong></p><p id="">As part of this release, you will see three main changes in Webflow:</p><h2 id=""><strong id="">New tabbed navigation </strong>‍</h2><p id="">The new tabbed navigation makes it easy for teams to quickly and confidently navigate the powerful capabilities Webflow’s platform has to offer across four new tabs:&nbsp;</p><ul id=""><li id="">Design – move between different modes based on your roles and permissions</li><li id="">CMS – where you can manage your content including ecommerce and user accounts data&nbsp;</li><li id="">Insights - where you can find the features and data related to Webflow Analyze and Optimize&nbsp;</li><li id="">Preview - where you can preview your site, distraction free</li></ul><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:3358px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="3358px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/673bbc63ae795046cb9543ee673bbbfa4d29263e2b75a9f8image%2520(1).png>" loading="lazy" alt="__wf_reserved_inherit" width="auto" height="auto" id=""></div><figcaption id="">The new tabbed navigation lets users move quickly between workflow inside Webflow.</figcaption></figure><h2 id="">‍<strong id="">New context bar</strong>‍</h2><p id="">Located at the top of a site’s canvas, the context bar lets you quickly view and filter across the pages, collections, components, breakpoints, experiments and locales you’re designing with—it’s also where you will be able to switch between page branches. Together, this information provides a new level of insight for designers, allowing you to get a comprehensive overview of who you are designing for, in a single glance.&nbsp;</p><p id=""><strong id=""><em id="">A note about breakpoints:</em></strong><em id=""> In addition to adding a breakpoint switch to the context bar, we have also moved one-click breakpoint switching the breadcrumb bar which can be pinned to either the top, or bottom of the canvas, depending on your preferences!</em></p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:3358px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="3358px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/673bbc63ae795046cb9543f2673bbc2af651c9837c7594a9image.png>" loading="lazy" alt="__wf_reserved_inherit" width="auto" height="auto" id=""></div><figcaption id="">The context bar lets you quickly view and filter across your site's building blocks including pages, collections, components, breakpoints and more.</figcaption></figure><h2 id=""><strong id="">Updated site actions </strong>‍</h2><p id="">We’ve also made some small updates to the site actions section of the navigation making it easier to<strong id=""> </strong>see who’s working alongside you in Webflow, drop comments throughout a build, and publish your site—whether it’s for staging or going live to production. <br><br><strong id=""><em id="">A note about code exports: </em></strong><em id="">As part of this update, you’ll notice that we’ve removed Code Export from this top navigation – however you can continue to access this functionality from the global dropdown menu at the top of left-navigation panel.</em></p><p id="">You can learn more about Webflow's new navigation by watching <a href="<https://youtu.be/u7zm19YgQBA?si=c7YB6yiBfIl7y5c9&t=1043>" target="_blank" id="">the product announcement at Webflow Conf 2024, </a>visiting <a href="<https://university.webflow.com/videos/welcome-to-the-webflow-ui>" id="">Webflow University</a>, or reading more on our <a href="<https://help.webflow.com/hc/en-us/articles/33961260162323-Intro-to-Webflow>" id="">Help Center</a>.</p>


Launched on
November 19, 2024
Category
Designer

Related updates

Custom tooltips for component props

Custom tooltips for component props

Learn more
Shared Libraries available on all paid Workspace plans

Shared Libraries available on all paid Workspace plans

Learn more
Introducing Webflow Interactions, powered by GSAP

Introducing Webflow Interactions, powered by GSAP

Learn more
Rename elements and component instances

Rename elements and component instances

Learn more
Advanced variables with functions

Advanced variables with functions

Learn more
See recently modified classes in the style selector

See recently modified classes in the style selector

Learn more