Navbar

You can create a fixed or fluid navbar by using the container or container-fluid class, respectively.

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/navbar.css file second from your npm repository. Make sure to load jquery.min.js and then the @corelogic/clui/dist/js/corelogic-ui.min.js file from your npm packages somewhere in your page.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the navbar with mobile support, make sure to load @corelogic/clui/dist/js/components/navbarSearch.js. If using a search input on the navbar, call window.clui.navbarSearchInit() to initialize the search input.

Base Navbar

For mobile, make sure to initialize the mobile menu on load: window.clui.mobileMenuInit()

Method Purpose Notes
window.clui.mobileMenuInit() Initialize mobile menu.
window.clui.mobileMenuClose(class) Closes the menu. By default the menu closes when the X is clicked or when a menu item is selected. The class is optional and useful if you need to specify a context.
window.clui.mobileSearchInit() Initilaized mobile search
window.clui.mobileSearchClose() Closed the search. By default the search closes when the X is clicked. If using the autocomplete, you can specify the close event when an item is selected.
<nav class="navbar navbar-default" role="navigation">
  <div class="mobile-overlay"></div>
  <div class="container-fluid">
    <div class="navbar-collapse-btn">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-collapse-3">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </div>
    <div class="navbar-header">
      <div class="navbar-logo"></div>
      <div class="application-name">
        <h1>CoreLogic UI</h1>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse-3">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Active Page</a></li>
        <li><a href="#">Inactive Page</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <i class="fa fa-times"></i>
    </div>
  </div>
</nav>

Navbar with search field

You can view a sample set of results in the search field by typing s. To provide the results to the search field, use autoCompleteInit(selector, options) and set a source upon initialization in the options object. For example, in this case you can say autoCompleteInit('#searchbox', { source: YOUR SOURCE}) Please refer to the JQuery-UI API documentation for more details about what options can be used.

For mobile, make sure to initialize the mobile menu and search on load:

window.clui.mobileMenuInit();
window.clui.mobileSearchInit();

If you would like to only load the navbar with search component, make sure to load @corelogic/clui/dist/js/components/navbarSearch.js and @corelogic/clui/dist/js/components/autocomplete.js.

See the fullpage example for a demo of the mobile search. FullScreen Demo Page.

<nav class="navbar navbar-default" role="navigation">
  <div class="mobile-overlay"></div>
  <div class="mobile-search">
      <div class="mobile-searchbar">
          <i class="fa fa-search"></i>
          <form name="mobileForm">
              <label class="sr-only" for="mobileSearchbox">Search for something...</label>
              <input type="text" class="navbar-search" placeholder="Search something..." id="mobileSearchbox">
          </form>
          <i class="fa fa-times"></i>
      </div>
  </div>
  <div class="container-fluid">
    <div class="navbar-collapse-btn">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-collapse-4">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </div>
    <button type="button" class="navbar-mobile-search">
        <label class="sr-only" for="mobileNavSearch">Search for something...</label>
        <i class="fa fa-search" aria-hidden="true" id="mobileNavSearch"></i>
    </button>
    <div class="navbar-header">
      <div class="navbar-logo"></div>
      <div class="application-name">
        <h1>CoreLogic UI</h1>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse-4">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Active Page</a></li>
        <li><a href="#">Inactive Page</a></li>
      </ul>
      <form class="navbar-form navbar-search">
          <div class="form-group">
              <div class="input-group">
                  <label class="sr-only" for="searchbox">Search for an address...</label>
                  <input class="form-control" placeholder="Search for an address..." id="searchbox"/>
                  <i class="fa fa-search left-icon"></i>
              </div>
          </div>
      </form>
      <i class="fa fa-times"></i>
    </div>
  </div>
</nav>

Navbar with category search field

You can view a sample set of results in the search field by typing s. To provide the results to the search field, use window.clui.categoryCompleteInit(selector, options) and set a source upon initialization in the options object.

If you would like to only load the navbar with category search field component, make sure to load @corelogic/clui/dist/js/components/autocomplete.js.

The component expect certain object fields to exist. It requires a label, category, and a subcategory. Here's an example:

var data = [
        { label: "Pweroihvsyl", category: "Client", subcategory: '' },
        { label: "Syloop", category: "Group", subcategory: 'Wells Fargo' },
        { label: "Sylvia Lai", category: "User", subcategory: 'Wells Fargo > Development Production' },
        { label: "Sylvia Lai", category: "User", subcategory: 'Wells Fargo > Group B' },
        { label: "Sylvia Lee", category: "User", subcategory: 'Wells Fargo > Group B' },
      ];

For example, in this case you can say window.clui.categoryCompleteInit('#searchbox2', { source: YOUR SOURCE}) Please refer to the JQuery-UI API documentation for more details about what options can be used.

We currently customize the open and close events and the classes parameter. If you need to override those, you need to make sure you keep our customizations or it will not work right. (See autocomplete.js)

<nav class="navbar navbar-default" role="navigation">
<div class="mobile-overlay"></div>
  <div class="mobile-search">
      <div class="mobile-searchbar">
          <i class="fa fa-search"></i>
          <form name="mobileForm">
              <label class="sr-only" for="mobileSearchbox2">Search for something...</label>
              <input type="text" class="navbar-search" placeholder="Search something..." id="mobileSearchbox2">
          </form>
          <i class="fa fa-times"></i>
      </div>
  </div>
  <div class="container-fluid">
    <div class="navbar-collapse-btn">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-collapse-5">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </button>
    </div>
    <button type="button" class="navbar-mobile-search">
        <label class="sr-only" for="mobileNaveSearch2">Search for something...</label>
        <i class="fa fa-search" aria-hidden="true" id="mobileNavSearch2"></i>
    </button>
    <div class="navbar-header">
      <div class="navbar-logo"></div>
      <div class="application-name">
        <h1>CoreLogic UI</h1>
      </div>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse-5">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Active Page</a></li>
        <li><a href="#">Inactive Page</a></li>
      </ul>
      <form class="navbar-form navbar-search">
          <div class="form-group">
              <div class="input-group">
                  <label class="sr-only" for="searchbox2">Search for an address...</label>
                  <input class="form-control" placeholder="Search for an address..." id="searchbox2"/>
                  <i class="fa fa-search left-icon"></i>
              </div>
          </div>
      </form>
      <i class="fa fa-times"></i>
    </div>
  </div>
</nav>

Secondary Nav

You can create a fixed or fluid secondary navigation element by using the container or container-fluid class, respectively

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first and then the @corelogic/clui/dist/css/components/secondary_nav.css file second from your npm repository.

OPTIONAL JAVASCRIPT
To use the `more` class shadow effect both jQuery and corelogic-ui.min.js must be loaded to function properly.


If you add the more class to the container, the secondary nav becomes scrollable left to right. With javascript it shows shadow on the left and/or right if there is more content to scroll to.

If you would like to only load the secondary nav, make sure to load @corelogic/clui/dist/js/components/secondaryNav.js. This adds scrolling for mobile devices.

Base Secondary Nav

<div class="secondary-nav">
  <div class="container-fluid more">
    <ul class="secondary-tabs">
      <li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
      <li><a class="secondary-tab" href="#">Navigation</a></li>
      <li><a class="secondary-tab" href="#">Element</a></li>
      <li><a class="secondary-tab" href="#">Example</a></li>
    </ul>
  </div>
</div>

Secondary Nav Separator

<div class="secondary-nav">
  <div class="container-fluid more">
    <ul class="secondary-tabs">
      <li class="secondary-tab separator"><a href="#"><i class="fa fa-angle-left"></i> Manage users</a></li>
      <li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
      <li><a class="secondary-tab" href="#">Navigation</a></li>
      <li><a class="secondary-tab" href="#">Element</a></li>
      <li><a class="secondary-tab" href="#">Example</a></li>
    </ul>
  </div>
</div>

Secondary Nav with Other Content

<div class="secondary-nav">
  <div class="container-fluid more">
    <ul class="secondary-tabs">
      <li class="secondary-tab separator"><a href="#"><i class="fa fa-angle-left"></i> Manage users</a></li>
      <li class="active"><a class="secondary-tab" href="#">Account Details</a></li>
      <li><a class="secondary-tab" href="#">Audit Trail</a></li>
      <li class="not-nav"><button type="button" class="btn btn-danger">Save Changes</button></li>
    </ul>
  </div>
</div>