Breadcum

<p>

    <a href="javascript:getCountry()">Home</a>

    <span id="country"></span> 

    <span id="state"></span>

    <span id="city"></span>

    <span id="company"></span>

</p>

<div id="list"></div>

<script>

var countries = ["usa","indonesia","japan"];

var states = [

  ["california", "new york", "texas"],

  ["east java", "south sumatra", "west java"],

  ["honsu", "kyusu"]

];

var cities = [

  [

    ["mountain view", "palo alto", "san jose"],

    ["nyc", "columbia", "rokefeller"],

    ["dallas", "austin"]

  ],

  [

    ["surabaya", "malang", "jember"],

    ["medan", "natal", "batak"],

    ["bandung", "cirebon", "bogor"]

  ],

  [

    ["kyoto","osaka"],

    ["tokyo"]

  ]

];

var companies = [

  [

    [

      ["<h1>HeadQuarter of Google</h1>"], 

      ["<h1>Yahoo Headquarter</h1>"],

      ["<h1>Adobe Base Camp</h1>"]

    ],

    [

      ["un is here","bloomberg is here"],

      ["univ of columbia"],

      ["rockefeller center"]

    ],

    [

      ["dell may be hee","large airport is here"],

      ["like name of you"]

    ]

  ],

  [

    [

      ["unair is here","its also"],

      ["unibraw is here","umm also"],

      ["just for unej"]

    ],

    [

      ["usu"],

      ["none"],

      ["none also"]

    ],

    [

      ["itb","unpad"],

      ["none"],

      ["ipb"]

    ]

  ],

  [

    [

      ["none"],

      ["none also"]

    ],

    [

      ["tokyo univ"]

    ]

  ]

];

function getCountry(){

    var list = document.getElementById('list');

    list.innerHTML = "";

    for(i=0;i<countries.length;i++){

        list.innerHTML = list.innerHTML +

          "<a href='javascript:getStates("+i+")'>"+ 

          countries[i] + "</a><br/>";

    }

    var country = document.getElementById('country');

    country.innerHTML = "";

    var state = document.getElementById('state');

    state.innerHTML = "";

    var city = document.getElementById('city');

    city.innerHTML = "";

}

function getStates(k){

    var list = document.getElementById('list');

    list.innerHTML = "";

    for(i=0;i<states[k].length;i++){

        list.innerHTML = list.innerHTML + 

          "<a href='javascript:getCities(" +k+ "," +i+ ")'>" +

          states[k][i] + "<br/>";

    }

    var country = document.getElementById('country');

    country.innerHTML = ">> <a  href='javascript:getCountry()'>"+

       "Country</a>";

    var state = document.getElementById('state');

    state.innerHTML = "";

    var city = document.getElementById('city');

    city.innerHTML = "";

}

function getCities(k,l){

    var list = document.getElementById('list');

    list.innerHTML = "";

    for(i=0;i<cities[k][l].length;i++){

    list.innerHTML = list.innerHTML + 

      "<a href='javascript:getCompanies(" +k+ "," +l+ ","

      +i+ ")'>"+ cities[k][l][i] + "<br/>";

}

    var state = document.getElementById('state');

    state.innerHTML = ">> <a href='javascript:getStates(" +k+ 

      ")'>States</a>";

    var city = document.getElementById('city');

    city.innerHTML = "";

}

function getCompanies(k,l,m){

    var list = document.getElementById('list');

    list.innerHTML = "";

    for(i=0;i<companies[k][l][m].length;i++){

        list.innerHTML = list.innerHTML + "<h1>" + 

        companies[k][l][m][i] + "</h1><br/>";

    }

    var state = document.getElementById('city');

    city.innerHTML = ">> <a href='javascript:getCities(" +k+ 

        "," +l+ ")'>Cities</a>";

}

getCountry()

</script>    

<style>

    a { text-decoration: none; text-transform: capitalize;}

    h1 { text-transform: capitalize; }

</style>