Creating/customising website menus

Silverstripe Version: 4.1

I’m reading the docs here: How to Create a Navigation Menu – SilverStripe Documentation and it shows how to output some mark up.

How do we customise that per link? Like if I needed to add a CSS class for specific links so they can show an icon for example.

Is there anymore documentation on how this all works?

This probably isn’t the most elegant solution you could add a new DB text field to hold the css icon class for each page. Then you can output the $mycssicon inside the navigation markup wherever you need.

It’ll work but as I say might not be the most elegant solution.

You could also use something that already exists on SiteTree for everything in the navigation…

e.g. the .LowerCase method

<div class="$URLSegment.LowerCase">
<!-- <div class=“about-us”> -->

Or create your own custom method on your controller to take $this->URLSegment, lowercase it and strip the dashes and return it to your template if you wanted to.

Thanks, yeah that’s what I literally just did, added a css class to the page and buried it down in the Meta Data area of the page.

Works fine just a little weird/ugly to do it across different page types.

1 Like