创建面包屑导航,提示用户当前在网站中的位置。
面包屑组件由多个链接组成,这些链接并排对齐并由分隔符分隔。将 .uk-breadcrumb
class 添加到 <ul>
素中以定义组件。将 <a>
元素作为面包屑列表中的项目。活动状态(active)将自动应用于最后一个A <li>
元素。
要添加没有链接的列表项,请使用 <span>
元素而不是 <a>
。或者,通过将.uk-disabled
class添加到<li>
元素中来禁用<a>
元素,并从锚中移除href
属性,使其通过键盘导航无法访问。
<ul class="uk-breadcrumb">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><span></span></li>
</ul>
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Linked Category</a></li>
<li class="uk-disabled"><a>Disabled Category</a></li>
<li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
</ul>