Streaming live at 10am (PST)

~CMS breadcrumb like university.webflow?


#1

Hi Webflow user & team

I have a website project that explain how to use our software. And I found that using webflow CMS is very powerful.Because of that, we decided to make the tutorial inspired by webflow university site.

So my question is:

  1. How to make this menu that appear on every topic (that linked to CMS collection)?
    image

  2. If one of my contributor want to make new page [B], can they add it by them self and linking to the menu [A] (without going to designer mode? because we have more than 500 pages and a lot of contributor around the world)
    ?

Thank you


#2

That hierarchy or breadcrumb trail can be pulled from the CMS fields.

For the instance of WU, the “tutorials” button comes from a collection or dropdown selector. Let’s call that collection “type”. For WU, I see article, video, topic, course as some options.

Then there is definitely a reference field for the “category” as seen in the url below which becomes the second button in the breadcrumb.

The third button in your breadcrumb could be a reference field to a “tag” collection.

Basically you are creating an information funnel.
Type>Category>Tag>Content
The content collection template page (or any of the collection pages) can simply pull in the link and text for each reference in the breadcrumb trail.

Here’s an example of how I used this on a site. https://www.g4c.coffee/shop/a-z

Let me know if you have any questions. Happy designing!


#3

Hi matthewpmunger
Thank you for your reply.
Yes, that what I mean, how to create the breadcrumb using CMS.

Sorry, I don’t really understand.
Technically how to pull that out of CMS?
should we do copy and paste manually for all link and paste it on a breadcrumb trail?

Are the Type, Category, Tag, Content a static page or dynamic page that created using CMS?
if static, Can we create all the Type, Category, Tag, Content pages using CMS?


#4

As much of it can by dynamic driven by CMS references as you like.

For dynamic linking, review this. Specifically the section on “Linking to Collection pages”

For static example, to link to a static page, make a normal text link or button connected. Make a link for each “type” that is a static page. Then use conditions in the settings panel to hide/reveal the link that corresponds to the type assigned to the content.


#5

Hey @yuan,

This is how to setup the breadcrumb very closely to what you require (must be inside a CMS post);

  1. Breadcrumb structure

50

  1. Link the button to the CMS field settings

10

Hope this helps

Best,
Naweed


#6

@matthewpmunger
Yes, thanks for the article link!

Hi @nwdsha

Thank you for showing the screenshot. It really helpful.
is the Guides Collectible is only for Category naming?

My 2nd question is:
Can contributor add another breadcrumb?
for example contributor want to add another category?