You are not logged in!
Login Link

Nav-Menu to Variables

This Custom Navigation Menu is an advanced design of several features including BBCode, Variables, Secrets, Sections, Icons, Custom Containers and CSS. Please note this is the same Nav Menu you see on this page and this world in the upper left hand corner. A version of this Nav Menu has been recreated below showing the Hot Links within the secrets.
Warning: The World Anvil Surgeon General has determined that Custom CSS can lead to bouts of unrelenting tinkering and the loss of hours.


WA Tier 2 Journeyman.webp
Secrets (Journeyman+)

WA Tier 2 Journeyman.webp
CSS Customization (Journeyman+)

WA Tier 3 Master.webp
Variables (Master+)

WA Tier 4 Grandmaster.webp
Custom Containers (Grandmaster+)


Step 1 - Variables

  • Create a variable collection called Nav-Menu
  • Create one Variable Fragment per section of the menu
  • A space has been added between [ and v to keep variables from rendering in the example text.
    Variable Examples
    [ var:nav-menu-toc-graylion]
    [ var:nav-menu-home-graylion]
    [ var:nav-menu-hot-links-graylion]
  • Populate the Variables with BBCode, Custom Containers, Header and URL
  •   BBCode in Variables Examples
    Variable One - Home
    [container: nav_home] 
        [url: your_world_url_link_here] Home [/url] 

    Variable Two - TOC
    [container: nav_toc] 

    Variable Three - Hot Links
    [container: wrap_5][h2]Hot Links[/h2][/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Apolo [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Athena [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Campaigns [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Charts [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Dashboard [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Feature Request [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Help [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Heroes [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Maps [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Stat Blocks & Sheets [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Studio Sheet Design [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Subscribers [/url] [/container]
    [container: author_line] [url:] [section:fas fa-crosshairs] [/section] Timelines [/url] [/container]


    Step 2 - Secrets

  • Create a secret called Nav-Menu-Secrets.
  • Place your nav-menu-hot-links variable in the Nav-Menu-Secrets.
  • A space has been added between [ and v to keep variables from rendering in the example text.
  • Hot Links Secret
    [ var:nav-menu-hot-links]

    Step 3 - World Configuration

  • World Configuration > Homepage > Display Options > Uncheck Display Table of Contents
  • By using the [ TOC] instead of the default TOC, this allows us to control the order of items in the navigation menu, like placing the Home link above the TOC.
  • If your feeling adventurous you could display: none the TOC Header, an add your own renaming the TOC.
  • Next we will add our variables and secret in the Custom Navigation Menu section.
  • World Configuration > Display > Global Content > World Navigation Sidebar Custom Content
  • Note of setting up similar variables on different worlds, I recommend using slightly different variable names. I experienced odd results until changing several variable names.
  • [ var:nav-menu-toc-graylion]
    [ var:nav-menu-home-graylion]
    [ secret:123lotsofnumbers789]
  • At this point you should have a custom menu with everything except your own artistic CSS styling.

    Step 4 - CSS Styling

  • Paste the CSS in your World CSS Styling
  • Change color and image to meet your artistic touch.
  • A space has been added between / and * so the CSS comments show within the code block. you must remove the space or your CSS will catch on fire.
    CSS Styling
    .user-css .world-navigation-box .world-menu .category-list + .list-box {
      display: none;
    / * This bit is the actual animation being called above, you can change the colours in here to whatever you like. I had to add those 'inset' shadows so that it'd glow inwards as well, you may be able to get rid of them */
    @-webkit-keyframes glow {
      from {
      box-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 20px #000000, 0 0 25px #fff, 0 0 25px #fff, inset 0 0 1px #fff, inset 0 0 1px #fff;
      to {
      box-shadow: 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #000000, 0 0 30px #fff, 0 0 80px rgba(237,227,194,0.1), inset 0 0 3px #fff, inset 0 0 4px #000000;
    / * The content url is to change the icon button */
    / *The animation you can change the 2s for faster/slower animation*/
    .user-css-presentation .world-navigation-palette-trigger {
      -webkit-animation: glow 2s ease-in-out infinite alternate; 
      -moz-animation: glow 2s ease-in-out infinite alternate;
      animation: glow 2s ease-in-out infinite alternate;
      background: #ffffff;
      border: 2px solid black;
      border-radius: 10px;
      content: url(
      position: absolute;
        top: 45px;
        left: 10px;
      height: 80px;
        max-height: 60vh;
      padding: 0px;
      width: 80px;
    .user-css-presentation #world-navigation-sidebar {
      background: white;
      background-image: white;
      border: 1.5px solid black;
      border-radius: 10px;
      height: 100vh;
        max-height: 58vh;
      margin: 0;
      overflow: auto;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 5px;
      padding-bottom: 25px;
      position: absolute;
        left: 10px; 
        top: 130px; 
      width: 325px !important;
        max-width: 325px !important;
        min-width: 325px !important;
      z-index: 1500;
    .user-css-presentation #world-navigation-sidebar::after {
      bottom: unset;
      display: none;
    .user-css#world-navigation-sidebar h5 {
      font-size: 1.05em;
    / * Home link */
    .user-css .home_nav h3 {
      text-align: center;
      background-color: darkred;
      color: white;
      padding: 3px;
      border: none;
      border-radius: 10px;
      font-weight: bold;
      margin-top: 10px;
      font-size: 24px;
    .user-css .home_nav h3 a {
      color: white;
    .user-css .home_nav h3 a:hover {
      color: white;
    / * Hides uncategorized articles */
    .user-css .nav_toc .world-toc-loader .list-box:nth-child(3) .category-list {
    / * Blends secrets in and hidez secrets name and group */
    .user-css .wrap_6 .user-css-secret {
     background-color: transparent;
     margin: 0px;
     padding: 0px;
    .user-css .wrap_6 .user-css-secret h5 {
     display: none;
    .user-css .wrap_6 .secret-groups {
     display: none;
    / * Menu Item Container */
    .user-css .author_line a {
     white-space: nowrap;
     display: inline-block;
     font-size: 14px;
     font-weight: bold;
     padding-left: 20px;
     margin-top: 5px;
     margin-bottom: 5px;
     color: black;
    / * Menu Font Awesome Icon */
    .user-css .fas fa-crosshairs {
     white-space: nowrap;
     display: inline-block;
     margin-right: 20px;
     color: black;
      Original CSS for the Nav-Menu from Spartango and Stormbrill.  
      Original and really cool Accordian Spoiler code by User51  


    Please Login in order to comment!
    Powered by World Anvil