# Consider marking up the breadcrumb right nav list as a list

**URL:** <https://forums.knack.com/t/consider-marking-up-the-breadcrumb-right-nav-list-as-a-list/6746>\
**Category:** API & Custom Code\
**Created:** [May 8, 2019, 11:58am UTC](https://forums.knack.com/t/consider-marking-up-the-breadcrumb-right-nav-list-as-a-list/6746 "2019-05-08T11:58:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NikClayton79994](https://avatars.discourse-cdn.com/v4/letter/n/57b2e6/32.png) [@NikClayton79994](https://forums.knack.com/u/NikClayton79994)\
**Post date:** [May 8, 2019, 11:58am UTC](https://forums.knack.com/t/consider-marking-up-the-breadcrumb-right-nav-list-as-a-list/6746/1 "2019-05-08T11:58:59Z")

</div>

Please consider using list items to markup the links that occur on the right of the breadcrumb navigation bar.

My app has multiple roles, which means that the right of the nav bar looks like

```
Logged in as **Joe User** - Account Settings - Applicant Details - Log Out
```

and the HTML looks like:

```
<div class="kn-current_user" id="5cd15858db67780006234e15">
<span class="kn-current-user-intro">Logged in as</span> <span class="first">Joe</span> <span class="last">User</span> -
```

```
<a href="#account-settings" data-kn-slug="#account-settings"><span>Account Settings</span></a>

-

<a href="#applicant-details" data-kn-slug="#applicant-details"><span>Applicant details</span></a> -

<a href="#" class="kn-log-out">Log Out</a>
</div>
```

I'm trying to remove the "Applicant Details" link using CSS (rather than have it there I've created a dedicated page for it so it shows up below the logo next to the other pages in my app.

I can target the "Role Details" link for removal using custom CSS, with

```
/* Hide the "role details" link in the breadcrumb bar, we'll use a custom
page for that */
div.kn-current_user a:nth-of-type(2) {
display: none;
}
```

but that ends up rendering the entry as

```
Logged in as **Joe User** - Account Settings - - Log Out
```

Notice the extra " - " before "Log Out".

I can't target that text content for removal using CSS.

If the markup was instead:

```
<div class="kn-current_user" id="5cd15858db67780006234e15">
<ul>
<li><span class="kn-current-user-intro">Logged in as</span> <span class="first">Joe</span> <span class="last">User</span></li>

<li><a href="#account-settings" data-kn-slug="#account-settings"><span>Account Settings</span></a></li>

<li><a href="#applicant-details" data-kn-slug="#applicant-details"><span>Applicant details</span></a></li>

<li><a href="#" class="kn-log-out">Log Out</a></li>
</ul>
</div>
```

(or similar) and you used CSS ::before and the content property to insert the "-" then I could hide just the second list item in CSS and wouldn't have the extra "-" characters.