[All Adaptavist Apps]
Page History
| Excerpt |
|---|
This short tutorial shows you how to style the breadcrumbs |
HTML Structure
The Breadcrumbs are built from an ordered list eg:
| CSS Stylesheet |
|---|
| Wiki Markup |
{excerpt}This short tutorial shows you how to style the breadcrumbs{excerpt} h2. HTML Structure The Breadcrumbs are built from an ordered list eg: {style} .code {width:700px;} {style} {code} |
| Code Block |
|---|
<span class="breadcrumbs">
<ol class="breadcrumbs ellipsis" id="breadcrumbs.list">
<li class="breadcrumb breadcrumb0 dashboardbreadcrumb"><a href="/dashboard.action">Dashboard</a> ></li>
<li class="breadcrumb breadcrumb1 spacebreadcrumb"><a href="/display/Docu">Documentation Intranet</a> ></li>
<li class="breadcrumb breadcrumbsExpansion breadcrumb2 pagebreadcrumb"><a href="/display/Docu/Home">Home</a> ></li>
<li class="breadcrumb breadcrumbsEllipsis breadcrumb2"><a href="javascript:void(document.getElementById('breadcrumbs.list').className = 'breadcrumbs expanded');" title="$3">...</a> ></li>
<li class="breadcrumb breadcrumb3 pagebreadcrumb"><a href="/display/Docu/Breadcrumbs+CSS">Breadcrumbs CSS</a></li>
</ol>
</span>
{code}
|
The
...
ellipsis
...
works
...
by
...
adding
...
a
...
classname
...
to
...
the
...
ordered
...
list
...
which
...
switches
...
between
...
two
...
sets
...
of
...
css,
...
one
...
where
...
the
...
expansion
...
is
...
hidden
...
and
...
the
...
ellipsis
...
visible,
...
the
...
other
...
with
...
the
...
ellipsis
...
hidden
...
and
...
the
...
expansion
...
visible.
...
CSS
...
Customisation
...
You
...
can
...
use
...
the
...
following
...
CSS
...
classes
...
to
...
customise
...
your
...
breadcrumb
...
trail
Class | Notes |
|---|---|
.breadcrumbs | Wrapper for entire breadcrumb trail |
.breadcrumb | All breadcrumbs in the trail |
.breadcrumbs li | The list ltems in the breadcrumb trail |
.breadcrumb0 | First item on Breadcrumb trail (Dashboard link) |
.breadcrumb1 | Second item on Breadcrumb trail (Space title or other top-level location, eg. Search) |
.breadcrumb2 | Third item on Breadcrumb trail (Orphan page, eg. Home, or global sub-section, eg. License Details) |
.breadcrumb3 | All subsequent breadcrumbs have a unique number (eg. 3, 4, 5, etc.) so you can customise any level of the trail |
.dashboardbreadcrumb | The breadcrumb that links to the dashboard |
.spacebreadcrumb | A breadcrumb that links to a space |
.pagebreadcrumb | A breadcrumb that links to a page, blogpost, etc. |
To style the entire breadcrumb trail simply use the breadcrumb class
| Code Block |
|---|
||Class||Notes|| ||.breadcrumbs|Wrapper for entire breadcrumb trail| ||.breadcrumb|Breadcrumb trail| ||.breadcrumbs li|The list ltems in the breadcrumb trail| ||.breadcrumb0|First item on Breadcrumb trail (??Dashboard?? link)| ||.breadcrumb1|Second item on Breadcrumb trail (Space title or other top-level location, eg. ??Search??)| ||.breadcrumb2|Third item on Breadcrumb trail (Orphan page, eg. ??Home??, or global sub-section, eg. ??License Details??)| To style the entire breadcrumb trail simply use the _breadcrumb_ class {code} /* breadcrumbs "yellow" background color */ .breadcrumb { background-color: #ffff00; } {code} |
If
...
you
...
want
...
to
...
style
...
any
...
of
...
the
...
individual
...
links
...
just
...
use
...
the
...
breadcrumb
...
class
...
and
...
add
...
an
...
appropriate
...
number
...
for
...
the
...
link.
...
The
...
breadcrumb
...
trail
...
is
...
0-indexed
...
so
...
to
...
style
...
the
...
first
...
two
...
breadcrumb
...
links
...
do
...
the
...
following:
| Code Block |
|---|
} /* dashboard link "green" background color */ .breadcrumb0 { background-color: 00ff00; } /* space link "white" background color */ .breadcrumb1 { background-color: #ffffff; } {code} |
The
...
.breadcrumb,
...
.breadcrumb0,
...
.breadcrumb1
...
and
...
.breadcrumb2
...
classes
...
include
...
both
...
the
...
breadcrumb
...
link
...
and
...
the
...
arrow
...
to
...
the
...
right
...
of
...
it,
...
eg.
...
.breadcrumb0
...
includes
...
Dashboard
...
>
...
-
...
if
...
you
...
want
...
to
...
customise
...
just
...
the
...
link,
...
apply
...
your
...
settings
...
to
...
the
...
link
...
tag
...
within
...
that
...
region,
...
eg:
| Code Block |
|---|
} .breadcrumb0 a:link { your styles here } {code} |
The
...
link
...
tags
...
allow
...
you
...
to
...
use
...
different
...
customisations
...
depending
...
on
...
whether
...
the
...
link
...
has
...
been
...
visited,
...
etc:
| Code Block |
|---|
} /* red text by default for all breadcrumb links */ .breadcrumbs a:link { color: #ff0000; } /* black text when hovering over a link */ .breadcrumb a:hover { color: #000000; } /* blue text when a link has been visited */ .breadcrumbs a:visited { color: #0000ff; } {code} |
If
...
you
...
look
...
at
...
the
...
breadcrumb
...
trail
...
above,
...
you
...
will
...
see
...
these
...
styles
...
applied
...
. If
...
you
...
need to
...
hide
...
the
...
breadcrumb
...
trail,
...
remove the {builder-breadcrumbs}
...
macro
...
from
...
the
...
panel
...
content. And if you want to hide any of the first three items on the breadcrumb trail, use Breadcrumb Options on the Options Tab in the Layout Manager.
We've applied this example to this page using the style macro.
Hints and Tips
You can remove any of the first three items in the breadcrumb trail using the options:
- Builder 1.x and 2.x: Navigation panel settings.
- Builder 3.x and above: Options Tab in Layout Manager
Simply tick which links you want to remove and they'll no longer appear in the breadcrumb trail.
| CSS Stylesheet |
|---|
If you want to hide any of the first three items on the breadcrumb trail, use [USERGUIDE:Breadcrumb Options] in theme configuration. (on) We've applied this example to this page using the [AtlassianConfluence:style macro]. h2. Hints and Tips You can remove any of the first three items in the breadcrumb trail using the options: * Builder 1.x and 2.x: [Navigation panel settings|Theme Configuration 2.x]. * Builder 3.x and above: [Options Tab] in [Layout Manager] Simply tick which links you want to remove and they'll no longer appear in the breadcrumb trail. {style} .breadcrumb { background-color: #ffff00; } .breadcrumb0 { background-color: #00ff00; } .breadcrumb1 { background-color: #ffffff; } .breadcrumbs li a:link { color: #ff0000; } .breadcrumbs li a:hover { color: #000000; } .breadcrumbs li a:visited { color: #0000ff; } {style} |
Overview
Community Forums
Content Tools
Apps