Skip to main content

JCU Web Framework

The living style guide for University web applications.

Navs

Navigation component customisations that are built upon the standard Navs from the core of Bootstrap.

Contents

Inverse Tabs

This is a simple example that applies the dark styling to the tabs component. The .nav-dark sets the colour of the elements and .bg-inverse configures the specific background colour. The latter is adjustable

<ul class="nav nav-tabs nav-dark bg-inverse">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Inverse tabs with dropdowns

<ul class="nav nav-tabs nav-dark bg-inverse">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Inverse interactive tabs

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

Main tab

Our students come from many backgrounds, promoting a rich cultural and experiential diversity on campus. Our undergraduate and postgraduate courses span the Arts, Biomedical Sciences, Business, Creative Media, Dentistry, Education, Engineering, Healthcare Sciences, Information Technology, Law, Medicine, Nursing and Midwifery, Pharmacy, Planning, Psychological Science, Science, Social Work, Sustainability and Veterinary Science. We aim to give graduates the qualifications and skills they need for the global workforce.

Profile panel

We also recognise our special obligation to be relevant to our own region and have forged close linkages into the economy and social fabric of the northern Queensland. We are dedicated to ensuring that our teaching, learning and research is not only of high quality, but also delivers practical benefits to the peoples and industries of the region.