Forum

Thread tagged as: Question, Problem, Api

Setting list navigation class based on CSS friendly page title

Hi,

I'm trying to set list classes within the stock navigation item template based on the page title, however, I can't see an easy way either to add a new custom page details field or to call PHP functions such as substring and strtolower to build a list class based on the page title.

Could you please advise the best approach to achieve this?

I've also tried setting an ID for each list item via the slug attribute, however, this doesn't seem to work.

E.g.

<snip> ~perch/templates/navigation/item.html

<li<perch:if exists="current_page"> class="active"</perch:if> id="test-<perch:content id="slug" type="slug" for="heading" />" <perch:if exists="ancestor_page"> class="ancestor"</perch:if>>

Apologies if this has been answered on the forum. I couldn't see anything relevant.

Thanks.
Thomas Birch

Thomas Birch 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Does it always need to be based on the page title, or could you use Page Attributes to set something up?

I think Page Attributes would probably be the way to go if possible.
Thomas Birch

Thomas Birch 0 points

7 years ago

Thanks. I had a look at the doc there and got it working by setting the CSS class via a custom page attribute.

Just out of interest - since end users probably wouldn't know what to set here and it's a bit of extra effort for each new page created - is it possible in theory to pass the page title through a processor within the html template to produce a CSS friendly string based on the existing attributes such as the page title? E.g. "About Us" becomes "about-us" .
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You could do something like

<perch:pages id="pageNavText" urlify="true" />
Thomas Birch

Thomas Birch 0 points

7 years ago

Thanks!