Professional Documents
Culture Documents
Breadcrumbs - Instr's
Breadcrumbs - Instr's
Weebly Community
Give Feedback
Vote on Features
Re: Link based breadcrumb
Comment
rightarrowsmall rightarrowsmall rightarrowsmall
hawaiisunfun
04-25-2022
10:29 AM
- edited
04-25-2022
01:43 PM
- edited
The beauty of weebly is that they leave it up to web developers to build a website - which builds coding skills! I mean everyone said it's easy if
weebly was able to do it here. That's great - let's use them to build our own.
Note: everyone's theme will be different - so the files will be in different locations than mine. My theme is old, so I don't even know the name of
it. I'll just say what I did.
I looked at this website's source by just adding view-source: in front of the url. There I found something called lia-breadcrumb node. I googled
that and found https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html in which they have the whole HTML and CSS code
for breadcrumbs after clicking the button saying 'open in code pen' and seeing https://codepen.io/pen, which could be easily copy/pasted into
weebly:
In the file 'main_style.css', I pasted above search box:
/* Breadcrumbs
--------------------------------------------------------------------------------*/
nav.breadcrumb {
border-radius: 4px;
nav.breadcrumb ol {
margin: 0;
padding-left: 0;
list-style: none;
nav.breadcrumb li {
display: inline;
nav.breadcrumb li + li::before {
display: inline-block;
margin: 0 0.25em;
transform: rotate(15deg);
height: 0.8em;
content: "";
nav.breadcrumb [aria-current="page"] {
color: #000;
font-weight: 700;
text-decoration: none;
Copy/paste this as an embed code widget on every page and fill in manually (unfortunately):
https://community.weebly.com/t5/ideas/ideaprintpage/blog-id/IdeaExchange/article-id/35650/comment-id/36343 1/3
6/27/22, 9:45 AM Link based breadcrumb - Weebly Community
<!DOCTYPE html>
<html>
<head>
</head>
<div id="header-wrap">
<div id="header-top">
<table id="header">
<tr>
<td id="logo">{logo}</td>
<td id="header-right">
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="navigation">
{menu}
<div class="search">{search}</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="main-wrap">
<div id="main">
<ol>
<li>
<a href="../../"></a>
</li>
<li>
<a href="../../#aria_ex"></a>
</li>
<li>
<a href="../../#breadcrumb"></a>
</li>
<li>
</li>
</ol>
</nav>
<div id="banner">
<div class="wsite-header"></div>
<em id="tl"></em>
<em id="tr"></em>
<em id="bl"></em>
<em id="br"></em>
</div>
<div id="content">
{content}
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer-wrap">
<div id="footer">
{footer}
<div class="clear"></div>
</div>
</div>
</body>
</html>
https://community.weebly.com/t5/ideas/ideaprintpage/blog-id/IdeaExchange/article-id/35650/comment-id/36343 2/3