Navigation Components v1.5 vs v2.0
Navigation:
Breadcrumb:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Breadcrumb | <ol class="breadcrumb score-component score-content score-breadcrumb"> <li> <a href="/">Home</a> </li> <li class="active">On Deck</li> </ol> | <ol class="score-breadcrumb (custom class)"> <li> <a href="#">...</a> </li> <li class="active">...</li> </ol> |
Main Menu Spider:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Main Menu Spider | <nav class="score-main-menu-spider navbar navbar-default" role="navigation"> <div class="score-nav-wrapper"> <div class="score-nav"> <!-- score-nav-wrapper is the container --> <div class="navbar-header score-navbar-header"> <button type="button" class="score-hamburger navbar-toggle" data-toggle="collapse" data-target="#mm-6e5118db-610f-41bb-8b12-9cabac7d7708"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand"> <img src="/sitecore/shell/~/media/System/Template Thumbnails/document.ashx?h=20&la=en&w=20" class="img-responsive" alt="Document" /> </a> </div> <div class="collapse navbar-collapse" id="mm-6e5118db-610f-41bb-8b12-9cabac7d7708"> <ul class="nav navbar-nav level-1"> <li class="score-mainmenu-root active"> <a href="/">Home</a> </li> <li class="dropdown multi-level"> <a href="/page-1">Page 1</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li> <a href="/page-1/page-1-1">Page 1-1</a> </li> <li> <a href="/page-1/page-1-2">Page 1-2</a> </li> <li> <a href="/page-1/page-1-3">Page 1-3</a> </li> <li> <a href="/page-1/page-1-4">Page 1-4</a> </li> </ul> </li> <li class="dropdown multi-level"> <a href="/page-2">Page 2</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li class="dropdown-submenu"> <a href="/page-2/page-2-1">page 2-1</a> <ul class="dropdown-menu level-3" role="menu"> <li> <a href="/page-2">2-1-1 ext</a> </li> <li> <a href="/page-2/page-2-1/2-1-2">2-1-2</a> </li> <li> <a href="/page-2/page-2-1/2-1-3">2-1-3</a> </li> <li> <a href="/page-2/page-2-1/2-1-4">2-1-4</a> </li> </ul> </li> <li> <a href="/page-2/page-2-2">Page 2-2</a> </li> <li> <a href="/page-2/page-2-3">page 2-3</a> </li> <li> <a href="/page-2/page-2-4">page 2-4</a> </li> </ul> </li> <li> <a href="/page-3">Page 3</a> </li> <li> <a href="http://test.com" target="_blank">test</a> </li> </ul> </div> </div> </div> </nav> | <nav class="score-main-menu-spider (custom class)" role="navigation"> <div class="score-navbar-header"> <button type="button" class="score-hamburger navbar-toggle" data-toggle="collapse" data-target="#mainMenuSpider"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand"> <img src="..." class="(custom class)" /> </a> </div> <div class="collapse navbar-collapse" id="mainMenuSpider"> <!-- USE .navbar-right if needed --> <ul class="nav navbar-nav level-1"> <li class="score-mainmenu-root active"> <a href="#">...</a> </li> <li class="dropdown multi-level"> <a href="#">...</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> </li> <li class="dropdown multi-level"> <a href="#">...</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li class="dropdown-submenu"> <a href="#">...</a> <ul class="dropdown-menu level-3" role="menu"> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> </div> </nav> |
Mega Menu:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Mega Menu | <nav class="navbar navbar-default yamm score-component score-content score-image score-megamenu" role="navigation"> <div class="score-nav-wrapper"> <div class="score-nav"> <!-- score-nav-wrapper is the container --> <div class="navbar-header score-navbar-header"> <button type="button" data-toggle="collapse" data-target="#menu" class="score-hamburger navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand"> ... </a> </div> <div class="collapse navbar-collapse" id="menu"> ... </div> </div> </div> </nav> | <nav class="score-megamenu (custom class)" role="navigation"> <div class="score-navbar-header"> <button type="button" data-toggle="collapse" data-target="#menu" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand"> <img src="..." class="(custom class)" /> </a> </div> <div class="navbar-collapse collapse" id="menu"> ...mega menu navbar row component... </div> </nav> |
Mega Menu Navbar Row:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Mega Menu Navbar Row | <div class="collapse navbar-collapse" id="menu"> <!--start megamenu navbar row--> <div class="score-structural score-column "> <div class="score-center"> ... </div> </div> <!--end megamenu navbar row--> </div> | <div class="score-column1"> <div class="score-center"> ... </div> </div> |
| Mega Menu Button | <a href="/" class="btn navbar-btn (Button Style) (Button Size) (Position)">Mega Menu Button</a> | <a href="#" class="score-button navbar-btn (custom class) (button size) (position)">...</a> |
Mega Menu Button Menu | <div class="btn-group score-component score-button score-button-menu navbar-btn"> <button type="button" class="dropdown-toggle" data-toggle="dropdown"> Mega Menu Button Menu <span class="caret"></span> <span class="sr-only">Toggle</span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> | <div class="score-button-menu navbar-btn (custom class) (button size) (position) (direction)"> <button type="button" data-toggle="dropdown"> ... <span class="caret"></span> <span class="sr-only">Toggle</span> </button> <ul class="dropdown-menu" role="menu"> ... </ul> </div> |
| Mega Menu Text Only | <p class="score-megamenu-text navbar-text score-component score-button score-button-menu score-navbar"> ... </p> | <p class="score-megamenu-text">...</p> |
| Mega Menu Split Button Menu | <div class="score-split-button-menu score-navbar score-button-menu score-component score-button btn-group (Direction) (Position)"> <a href="/" class="btn navbar-btn (Button Style)">Split Button Menu</a> <button type="button" class="btn dropdown-toggle navbar-btn (Button Style)" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> ... </ul> </div> | <div class="score-split-button-menu (custom class) (direction) (position)"> <a href="#" class="score-button navbar-btn">...</a> <button type="button" class="score-button (custom class) (button size)" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> ...button menu item... </ul> </div> |
Mega Menu Navbar:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Mega Menu Navbar | <ul class="nav navbar-nav score-component score-button score-button-menu score-navbar"> ... </ul> | <ul class="nav navbar-nav score-nav (custom class) (position)"> ... </ul> |
| Basic Menu Item | <li class="score-component score-megamenu-basic-item"> <a href="/">Basic Menu Item</a> </li> | <li class="score-megamenu-basic-item (custom class)"> <a href="#">...</a> </li> |
| Drop Down List | <li class="score-component score-megamenu-dropdown dropdown"> <a href="/">Drop Down List</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> | <li class="score-megamenu-dropdown (custom class)"> <a href="#">...</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> |
| Drop Down List Spider | <li class="score-component score-megamenu-dropdown active-section dropdown multi-level"> <a href="/">Home</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li> <a href="/">Header Components</a> </li> <li class="active-section dropdown-submenu"> <a href="/">Kitchen Sink</a> <ul class="dropdown-menu level-3" role="menu"> <li> <a href="/">Button Components</a> </li> </ul> </li> </ul> </li> | <li class="score-megamenu-dropdown multi-level (custom class)"> <a href="#">...</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu level-2" role="menu"> <li> <a href="#">...</a> </li> <li class="dropdown-submenu"> <a href="#">...</a> <ul class="dropdown-menu level-3" role="menu"> <li> <a href="#">...</a> </li> </ul> </li> </ul> </li> |
| Mega Menu Item | <li class="score-component score-megamenu-dropdown dropdown "> Menu Text <ul class="dropdown-menu" role="menu"> <li> <div class="score-megamenu-content"> ... </div> </li> </ul> </li> | <li class="score-megamenu-dropdown (custom class)"> ... <ul class="dropdown-menu" role="menu"> <li> <div class="score-megamenu-content"> ... </div> </li> </ul> </li> |
| Mega Menu Item Divider | <li class="score-megamenu-divider divider score-component"> <span class="sr-only">divider</span> </li> | <li class="score-megamenu-divider divider (custom class)"> <span class="sr-only">divider</span> </li> |
| Mega Menu Item with Link | <li class="dropdown score-component score-megamenu-dropdown"> <a href="/">Menu Item with Link</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu" role="menu"> <li> <div class="score-megamenu-content"> ... </div> </li> </ul> </li> | <li class="score-megamenu-dropdown (custom class)"> <a href="/">Menu Item with Link</a> <a href="#" class="dropdown-toggle toggle-caret" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">toggle menu</span> </a> <ul class="dropdown-menu" role="menu"> <li> <div class="score-megamenu-content"> ... </div> </li> </ul> </li> |
Menu List:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Menu List | <ul class="score-menu-list score-component" role="menu"> ... </ul> | <ul class="score-menu-list (custom class)"> ... </ul> |
| Menu List Divider | <li class="divider score-menu-list-divider score-component"> <span class="sr-only">divider</span> </li> | <li class="score-menu-list-divider (custom class)"> <span class="sr-only">divider</span> </li> |
Menu List Item | <li class="score-menu-list-item score-component"> <a href="/">Page 1-1</a> </li> | <li class="score-menu-list-item (custom class)"> <a href="#">...</a> </li> |
| Menu List Image | <li class="score-menu-list-image score-component score-content score-image "> <a href="/"> <img src="..." alt=""> </a> </li> | <li class="score-menu-list-image (custom class)"> <a href="#"> <img src="..." alt="#"/> </a> </li> |
| Sub Menu | <li class="score-component score-submenu-link-item dropdown-submenu"> <a href="/page-1/page-1-3">Page 1-3</a> <ul class="dropdown-menu" role="menu"> <li class="score-menu-link-item "> <a href="/page-2/page-2-1/2-1-2">2-1-2</a> </li> </ul> </li> | <li class="score-submenu-link-item (custom class)"> <a href="#">...</a> <ul class="dropdown-menu" role="menu"> <li class="score-menu-link-item"> <a href="#">...</a> </li> </ul> </li> |
My Siblings Menu:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| My Siblings Menu | <ul class="nav score-component score-content score-siblings-menu (Menu Style)" role="menu"> <li class="active"> <a href="/">Page 1</a> </li> <li> <a href="/">Page 2</a> </li> <li> <a href="/">Page 3</a> </li> </ul> | <ul class="score-siblings-menu (custom class)" role="menu"> <li class="active"> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> |
Previous Next Siblings Menu:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Previous Next Siblings Menu | <ul class="nav score-component score-content score-previous-next-menu (Menu Style)"> <li class="previous"> <a href="/">IT Manager</a> </li> <li class="parent active-section"> <a href="/">On Deck</a> </li> <li class="next"> <a href="/">Brand Manager</a> </li> </ul> | <ul class="score-previous-next-menu (custom class)"> <li class="previous"> <a href="#">...</a> </li> <li class="parent active-section"> <a href="#">...</a> </li> <li class="next"> <a href="#">...</a> </li> </ul> |
Section Menu Spider:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Section Menu Spider | <ul class="nav level-1 score-component score-content score-section-menu custom-menu-style"> <li class="score-section-menu-root"> <a href="/">Home</a> </li> <li> <a href="/">Header Components</a> </li> <li class="active-section"> <a href="/">Kitchen Sink</a> <ul class="nav level-2"> <li> <a href="/">Button Components</a> </li> <li class="active"> <a href="/">Navigation Components</a> </li> ... </ul> </li> </ul> | <ul class="score-section-menu level-1 (custom class)"> <li class="score-section-menu-root"> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li class="active-section"> <a href="#">...</a> <ul class="nav level-2"> <li> <a href="#">...</a> </li> <li class="active"> <a href="#">...</a> </li> ... </ul> </li> </ul> |
Sitemap Spider:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| Sitemap Spider | <div class="score-sitemap score-component"> <ul class="nav level-1"> <li> <a href="/">Home</a> <ul class="nav level-2"> <li> <a href="/">Page 1</a> <ul class="nav level-3"> <li> <a href="/">Page 1-1</a> </li> <li> <a href="/">Page 1-2</a> </li> <li> <a href="/">Page 1-3</a> </li> <li> <a href="/">Page 1-4</a> </li> </ul> </li> </ul> </li> </ul> </div> | <div class="score-sitemap (custom class)"> <ul class="nav level-1"> <li> <a href="#">...</a> <ul class="nav level-2"> <li> <a href="#">...</a> <ul class="nav level-3"> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> </ul> </li> </ul> </li> </ul> </div> |
The Section Menu:
| Component Name | SCORE v1.5 | SCORE v2.0 |
|---|---|---|
| This Section Menu | <ul class="score-component score-content score-section-menu"> <li class="score-section-menu-root"> <a href="/">Kitchen Sink</a> </li> <li> <a href="/">Button Components</a> </li> <li class="active"> <a href="/">Navigation Components</a> </li> </ul> | <ul class="score-section-menu (custom class)"> <li class="score-section-menu-root"> <a href="#">...</a> </li> <li> <a href="#">...</a> </li> <li class="active"> <a href="#">...</a> </li> </ul> |