Advanced Navigation Toolbar (ANT) Component

Link to article: Advanced Navigation Toolbar (ANT) Component.

@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");

.box {
    position: relative;
    padding: 0.5em;
    margin: 0.5em;
    box-shadow: 2px 1.5px 1px lightgrey, 0 0 0px 1px lightgrey;
    overflow-wrap: break-word;
    color: black;
}
.dividerContainer {
    background-image: url('http://timebox.wikidot.com/local--files/advanced-navigation-toolbar/AntDividerLarger.png');
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: center;
    width: 500px;
    height: 20px;
    margin: auto;
    padding: 20px 0px 0px 20px;
}

/* This following code has been taken wholesale from SCP-5555 as I couldn't find a component that did the same thing. */
.desktop-only {
    height: 18rem;
    width: 10rem;
    background: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 15rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border: solid 1px #444444;
    padding: 10px;
    -webkit-box-shadow: none;
       -moz-box-shadow:  none;
            box-shadow: none;
    overflow: visible;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: translateX(400%);
       -moz-transform: translateX(400%);
        -ms-transform: translateX(400%);
         -o-transform: translateX(400%);
            transform: translateX(400%);
}
.article {
    margin-top: -21rem!important;
}
@media (max-width: 1250px) {
    .desktop-only {
     display: none !important;
     visibility:hidden
    }
    .article {
     margin-top: 4rem!important;
    }
    #page-content > div:nth-child(5) {
     margin-top: 0;
    }
}

```
text-align: right; margin-top: -20px;
```
```
color: #246eb7
```
```
color: #B52424
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #B52424
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #B52424
```
```
color: #B52424
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #B52424
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #B52424
```
```
color: #B52424
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #C14B4B
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #246eb7
```
```
color: #728fac
```
```
color: #246eb7
```
```
color: #C14B4B
```
```
color: #246eb7
```

```
article
```
```
desktop-only
```
```
box
```
```
dividerContainer
```
```
box
```
```
code
```
```
box
```
```
code
```
```
dividerContainer
```
```
box
```
```
dividerContainer
```
```
box
```
```
dividerContainer
```
```
box
```
```
code
```
```
box
```
```
code
```
```
code
```
```
dividerContainer
```
```
box
```
```
code
```
```
box
```
```
code
```
```
dividerContainer
```
```
box
```
```
code
```
```
box
```
```
code
```
```
code
```

[[>]]
[[module Rate]]
[[/>]]

[[div style="text-align: right; margin-top: -20px;"]]
[[size 80%]]##757575|by Dr Moned##[[/size]]
[[/div]]

[[module CSS]]
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/stable/styles/black-highlighter.min.css");

.box {
    position: relative;
    padding: 0.5em;
    margin: 0.5em;
    box-shadow: 2px 1.5px 1px lightgrey, 0 0 0px 1px lightgrey;
    overflow-wrap: break-word;
    color: black;
}
.dividerContainer {
    background-image: url('http://timebox.wikidot.com/local--files/advanced-navigation-toolbar/AntDividerLarger.png');
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: center;
    width: 500px;
    height: 20px;
    margin: auto;
    padding: 20px 0px 0px 20px;
}

/* This following code has been taken wholesale from SCP-5555 as I couldn't find a component that did the same thing. */
.desktop-only {
    height: 18rem;
    width: 10rem;
    background: #ffffff;
    position: -webkit-sticky;
    position: sticky;
    top: 15rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    border: solid 1px #444444;
    padding: 10px;
    -webkit-box-shadow: none;
       -moz-box-shadow:  none;
            box-shadow: none;
    overflow: visible;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transform: translateX(400%);
       -moz-transform: translateX(400%);
        -ms-transform: translateX(400%);
         -o-transform: translateX(400%);
            transform: translateX(400%);
}
.article {
    margin-top: -21rem!important;
}
@media (max-width: 1250px) {
    .desktop-only {
     display: none !important;
     visibility:hidden
    }
    .article {
     margin-top: 4rem!important;
    }
    #page-content > div:nth-child(5) {
     margin-top: 0;
    }
}
[[/module]]

[[size 0%]] Also taken from SCP-5555[[/size]]
[[div class="article"]]
[[div class="desktop-only"]]
[[=]]
[[size 110%]]**Page Navigation.**[[/size]]
-----
[[/=]]

* [#Part1 What is ANT]
* [#Part2 Basics]
* [#Part3 Variables]
* [#Part4 Styles]
* [#Part5 Start and End]
* [#Part6 Dual Navigation]
* [#Part7 2:1 and 1:2 Navigation]
[[/div]]

[[# Part1]]
[[div class="box"]]
[[=]]
++++ What is ANT:
[[/=]]
----
ANT is a new navigation system, taking inspiration from the [https://scp-wiki.wikidot.com/component:earthworm Earthworm Series Navigator]. ANT was created to make a semi-customizable bar that allows access and gives information about the related articles.

If there are any issues, please contact me through Discord[[footnote]]T3DK[[/footnote]] or Wikidot[[footnote]][https://www.wikidot.com/account/messages#/new/5596963 Dr Moned][[/footnote]] pms.
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part2]]
[[div class="box"]]
[[=]]
++++ Basics:
[[/=]]
----
Using ANT is fairly simple (I hope). There are a few options and choices that will be explained lower down, but this is the basic code you can grab and tinker with to fit your needs.

[[div class="code"]]
[[span style="color: #246eb7"]][[include :scp-wiki:component:advanced-navigation-toolbar-source[[/span]] [[span style="color: #B52424"]]dual= false[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]styleNum[[/span]][[span style="color: #246eb7"]]=[[/span]] [[span style="color: #B52424"]]one[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevtext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevImage[[/span]][[span style="color: #246eb7"]]=[[/span]] prevImageURL
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hub[[/span]][[span style="color: #246eb7"]]=[[/span]] hubURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubtext[[/span]][[span style="color: #246eb7"]]=[[/span]] Name
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nexttext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nextImage[[/span]][[span style="color: #246eb7"]]=[[/span]] nextImageURL
[[span style="color: #246eb7"]]]][[/span]]
[[/div]]

When using ANT, do not alter any of the blue text above. The red text can be altered, but I recommend you read the related sections below before doing so.

[[div class="box"]]
[[=]]
[[collapsible show="Code used to produce the example image below:" hide="Code used to produce the example image below:"]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false@@
@@|styleNum= one@@
@@|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= SCP-001@@
@@|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png@@
@@|hub= https://scp-wiki.wikidot.com/scp-series |hubtext= Series One Hub@@
@@|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= SCP-003@@
@@|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Yesod.png@@
@@]]@@
[[/div]]
[[/<]]

[[/collapsible]]
[[/=]]
[[/div]]

[[include component:image-block
| name=ANTexample.png
| caption=ANT example
| align=center
| width=100%
]]
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part3]]
[[div class="box"]]
[[=]]
++++ Variables:
[[/=]]
----
> **"style"** - This will be addressed in the box below.

> **"prev"**  - This deals with the link leading to your previous article. "prev" takes in an input in the form of a link, then a pipe character ("|"), then the text you wish for the link to show. "https://scp-wiki.wikidot.com/scp-001|SCP-001" for example.
@@@@
> **"prevImage"**  - Refers to the image in the circle at the left end of the bar (More detailed images may be harder to see given the size). All the icons at [https://scp-wiki.wikidot.com/dr-moned-s-icons-and-art my art page] should work, in addition to any 600px squared image (which I believe any [https://scp-wiki.wikidot.com/anomaly-classification-system-guide image made for ACS] is, as the ones I tried worked fine). Please shout at me if they don't.
@@@@
> **"hub"** - Similar to "prev", though deals with the link and link text to your series hub. Alternatively, if you don't have a hub I recommend parenting it to either the SCP series list; or for tales something like the [https://scp-wiki.wikidot.com/curated-tale-series. Curated Tale Series Hub].
@@@@
> **"next"** - See "prev", though substitute "previous article" with "next article".
@@@@
> **"nextImage"** - See "prevImage", though substitute "left end" with "right end".

If you want some simple images, this page comes with "prev.png", "next.png" and "hub.png" in the files down below.
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part4]]
[[div class="box"]]
[[=]]
++++ Styles:
[[/=]]
----
ANT currently has three different styles to choose from. You can change between styles by putting "one", "two", or "three" after where it says "styleNum= " in the import section. Below you can see an example of the styles.[[footnote]]Please contact me if you want another style added or a darkmode for an existing style[[/footnote]]

[[include component:image-block
| name=STYLE1example.png
| caption=ANT style 1 example
| align=center
| width=100%
]]
@@ @@
[[include component:image-block
| name=STYLE2example.png
| caption=ANT style 2 example
| align=center
| width=100%
]]
@@ @@
[[include component:image-block
| name=STYLE3example.png
| caption=ANT style 3 example
| align=center
| width=100%
]]
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part5]]
[[div class="box"]]
[[=]]
++++ Start and End:
[[/=]]
----
Using either "|rightmode= a" or "|leftmode= a" in the include statement of the 1:1 bar[[footnote]]The one depicted under the section "basics"[[/footnote]] will create a start or end section respectively.

[[div class="code"]]
[[span style="color: #246eb7"]][[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false[[/span]]
[[span style="color: #B52424"]]|rightmode= a[[/span]]
[[span style="color: #B52424"]]|leftmode= a[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]styleNum[[/span]][[span style="color: #246eb7"]]=[[/span]] one
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevtext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevImage[[/span]][[span style="color: #246eb7"]]=[[/span]] prevImageURL
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hub[[/span]][[span style="color: #246eb7"]]=[[/span]] hubURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubtext[[/span]][[span style="color: #246eb7"]]=[[/span]] Name
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nexttext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nextImage[[/span]][[span style="color: #246eb7"]]=[[/span]] nextImageURL
[[span style="color: #246eb7"]]]][[/span]]
[[/div]]

[[div class="box"]]
[[=]]
[[collapsible show="Code used to produce the example image below:" hide="Code used to produce the example images below:"]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false@@
@@|styleNum= three@@
@@|rightmode= a@@
@@|hub= https://scp-wiki.wikidot.com/scp-series |hubtext= Series One Hub@@
@@|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= SCP-003@@
@@|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Yesod.png@@
@@]]@@
[[/div]]
[[/<]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= false@@
@@|styleNum= one@@
@@|leftmode= a@@
@@|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= SCP-001@@
@@|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png@@
@@|hub= https://scp-wiki.wikidot.com/scp-series |hubtext= Series One Hub@@
@@]]@@
[[/div]]
[[/<]]

[[/collapsible]]
[[/=]]
[[/div]]

[[include component:image-block
| name=LeftRightEndMode.png
| caption=Start and End for a series
| align=center
| width=100%
]]
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part6]]
[[div class="box"]]
[[=]]
++++ ANT - Dual navigation bar:
[[/=]]
----
If you have two tale series that both intersect on a single piece of work there is a dual version (With all of the different styles) of the ANT bar using the code below.

When switching between modes, make sure the include statement is correct, as "dual= false" is used to display the original bar, whereas "dual= true", as shown in red below is used for the dual mode.

[[div class="code"]]
[[span style="color: #246eb7"]][[include :scp-wiki:component:advanced-navigation-toolbar-source [[/span]][[span style="color: #B52424"]]dual= true[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]styleNum[[/span]][[span style="color: #246eb7"]]=[[/span]] one
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevtext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevImage[[/span]][[span style="color: #246eb7"]]=[[/span]] prevImageURL
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev2[[/span]][[span style="color: #246eb7"]]=[[/span]] article2URL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev2text[[/span]][[span style="color: #246eb7"]]=[[/span]] link2 text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev2Image[[/span]][[span style="color: #246eb7"]]=[[/span]] prev2ImageURL
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hub[[/span]][[span style="color: #246eb7"]]=[[/span]] hubURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubtext[[/span]][[span style="color: #246eb7"]]=[[/span]] Name
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubImage[[/span]][[span style="color: #246eb7"]]=[[/span]] imageRepresentingHub
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nexttext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nextImage[[/span]][[span style="color: #246eb7"]]=[[/span]] nextImageURL
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next2[[/span]][[span style="color: #246eb7"]]=[[/span]] article2URL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next2text[[/span]][[span style="color: #246eb7"]]=[[/span]] link2 text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next2Image[[/span]][[span style="color: #246eb7"]]=[[/span]] next2ImageURL
[[span style="color: #246eb7"]]]][[/span]]
[[/div]]
[[div class="box"]]
[[=]]
[[collapsible show="Code used to produce the example image below:" hide="Code used to produce the example image below:"]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= true@@
@@|styleNum= three@@
@@|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= prev article@@
@@|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png@@
@@|prev2= https://scp-wiki.wikidot.com/scp-002 |prev2text= another prev article@@
@@|prev2Image= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Yesod.png@@
@@|hub= https://scp-wiki.wikidot.com/ |hubtext= My Big Hub@@
@@|hubImage= https://timebox.wikidot.com/local--files/anttestinput3/ArchivistIcon.png@@
@@|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= nextArticle@@
@@|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Heimal.png@@
@@|next2= https://scp-wiki.wikidot.com/scp-004 |next2text= another nextArticle@@
@@|next2Image= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Terminal.svg@@
]]
[[/div]]
[[/<]]

[[/collapsible]]
[[/=]]
[[/div]]
[[include component:image-block
| name=BIGANTexample.png
| caption=Dual ANT bar.
| align=center
| width=100%
]]
[[/div]]

[[div class="dividerContainer"]]
[[/div]]

[[# Part7]]
[[div class="box"]]
[[=]]
++++ ANT - 2:1 and 1:2 Navigation for the Dual Mode:
[[/=]]
----
If you have two tale series that join together, or if you have a tale series that splits into two different series there is a dual version (With all of the different styles) of the ANT bar using the code below.

When switching between modes, make sure the include statement is correct, as "rightmode= a" is used to display the 1:2 configuration, whereas "leftmode= a" is used to display the 2:1 configuration, as shown in red below.[[footnote]]Use leftmode or rightmode, don't put them both in the include statement... unless you want a 1:1 bar with an image in addition to the hub link in the centre.[[/footnote]]

When using "rightmode= a" you do not need to have prev2, prev2Text and prev2Image in the include statement. When using "leftmode= a" you do not need to have next2, next2Text and next2Image in the include statement. All of these statements are also shown in red below.

[[div class="code"]]
[[span style="color: #246eb7"]][[include :scp-wiki:component:advanced-navigation-toolbar-source dual= true[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]styleNum[[/span]][[span style="color: #246eb7"]]=[[/span]] one
[[span style="color: #B52424"]]|rightmode= a[[/span]]
[[span style="color: #B52424"]]|leftmode= a[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prev[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevtext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]prevImage[[/span]][[span style="color: #246eb7"]]=[[/span]] prevImageURL
[[span style="color: #C14B4B"]]|prev2= article2URL |prev2text= link2 text
|prev2Image= prev2ImageURL[[/span]]
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hub[[/span]][[span style="color: #246eb7"]]=[[/span]] hubURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubtext[[/span]][[span style="color: #246eb7"]]=[[/span]] Name
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]hubImage[[/span]][[span style="color: #246eb7"]]=[[/span]] imageRepresentingHub
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]next[[/span]][[span style="color: #246eb7"]]=[[/span]] articleURL [[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nexttext[[/span]][[span style="color: #246eb7"]]=[[/span]] link text
[[span style="color: #246eb7"]]|[[/span]][[span style="color: #728fac"]]nextImage[[/span]][[span style="color: #246eb7"]]=[[/span]] nextImageURL
[[span style="color: #C14B4B"]]|next2= article2URL |next2text= link2 text
|next2Image= next2ImageURL[[/span]]
[[span style="color: #246eb7"]]]][[/span]]
[[/div]]
[[div class="box"]]
[[=]]
[[collapsible show="Code used to produce the examples image below:" hide="Code used to produce the example image below:"]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= true@@
@@|styleNum= three@@
@@|rightmode= a@@
@@|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= prev article@@
@@|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png@@
@@|hub= https://scp-wiki.wikidot.com/ |hubtext= My Big Hub@@
@@|hubImage= https://timebox.wikidot.com/local--files/anttestinput3/ArchivistIcon.png@@
@@|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= nextArticle@@
@@|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Heimal.png@@
@@|next2= https://scp-wiki.wikidot.com/scp-004 |next2text= another nextArticle@@
@@|next2Image= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Terminal.svg@@
]]
[[/div]]
[[/<]]

[[<]]
[[div class="code"]]
@@[[include :scp-wiki:component:advanced-navigation-toolbar-source dual= true@@
@@|styleNum= three@@
@@|leftmode= a@@
@@|prev= https://scp-wiki.wikidot.com/scp-001 |prevtext= prev article@@
@@|prevImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Damnum.png@@
@@|prev2= https://scp-wiki.wikidot.com/scp-002 |prev2text= another prev article@@
@@|prev2Image= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Yesod.png@@
@@|hub= https://scp-wiki.wikidot.com/ |hubtext= My Big Hub@@
@@|hubImage= https://timebox.wikidot.com/local--files/anttestinput3/ArchivistIcon.png@@
@@|next= https://scp-wiki.wikidot.com/scp-003 |nexttext= nextArticle@@
@@|nextImage= https://scp-wiki.wdfiles.com/local--files/dr-moned-s-icons-and-art/Heimal.png@@
]]
[[/div]]
[[/<]]

[[/collapsible]]
[[/=]]
[[/div]]
[[include component:image-block
| name=LeftRightEndModeDual.png
| caption=End and Start for ANT.
| align=center
| width=100%
]]
[[/div]]
[[/div]]

Advanced Navigation Toolbar (ANT) Component

Module Styles

Inline Styles

Includes

CSS Classes

Page Source