Nav menu - Rendering dividing pipe characters

Question

Hello. I have a webcontrol with a handful of links displayed at the top, eg:

Link 1 | Link 2 | Link 3

Currently they're each an asp:Hyperlink. Is there a clever solution for rendering out the dividing pipe characters?

Currently they're within the containing placeholder. We can't make any guarantees about a given link always appearing. I don't want a really big if-statement, and I'm reluctant to render all the links purely in the code-behind...

[Update]

Thanks for pointing out that CSS is the way to go. It's certainly made things easier. We did, of course, need a cross-browser solution though.

The HTML list (<ul> & <li>) structure works a treat, as the first-child / last-child properties take care of the end of the list. Note: These are automatic - you don't have to assign them in the markup.

As we only needed pipe symbols, I used the border property. If you wanted, you could use the margin-left + background image CSS properties to have an image spacer instead.

Our solution:

HTML:

<ul class="navMenu">
    <li><a href="...">Link 1</a></li>
    <li><a href="...">Link 2</a></li>
    <li><a href="...">Link 2</a></li>
</ul>

CSS:

ul.navMenu li
{
    display: inline;
    margin-left: 0;
}

ul.navMenu a
{
    border-left: solid 1px #333333;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

ul.navMenu li.first-child a
{
    border-left: none 0;
    padding-left: 0;
}

Answer 1

The a + a CSS solution doesn't work across all browsers, unfortunately.

I typically mark up my list like:

<ul>
    <li class="first-child"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="last-child"><a href="#">Link 3</a></li>
</ul>

Not only does this provide better JavaScript hooks, but you can customize the left/rightmost element to turn off the border or adjust padding as necessary.

Answer 2

the CSS and/or JQuery method works great. Some times you really might just want <a></a> | <a></a> | <a></a> though.

It might be worth your time to look at a couple of server side controls. Depending on where you get the links (you said some might be missing?) you could just use a control, it has a where you could put the |. If the links are missing depending on who is logged in and some kind of user roles, maybe you can use the sitemap + control, it too has a .