# Content

### 1. Layout

- Default HTML layout used for content area is:
  1. breadcrumbs and searchbox
  2. page title optional
  3. page conent
  4. settings box optional

         ...

- Starting with the following file you can find more details:
  `mustache/app/views/layouts/default.mustache`

### 2. Breadcrumbs

- `.breadcrumbs` is inside `.main-content` and contains `ul.breadcrumb` and searchbox.

- For an example on generating breadcrumbs list in your application, see sidebar active item section.

### 3. Search box

- Search box is inside `.breadcrumbs`
  You can also have a search box inside .navbar

- Optional auto complete is powered by typeahead plugin of Bootstrap 2, which has been removed in Bootstrap 3, but is lightweight and functional.

       //auto complete's data source is a static array
       $('#nav-search-input').typeahead({
         source: some_static_array,
         updater: function (item) {
           //when an item is selected from dropdown menu, focus back to input element
           $('#nav-search-input').focus();
           return item;
         }
       });

  You can also retrieve auto complete data from a remote database:

       //auto complete's data is dynamically retrieved from server
       source: function(query, process) {
          $.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){
             process(result_items);
          })
       }

- Adding `.minimized` class to `.nav-search` makes it minimized by default:

### 4. Page Title & Content

- `.page-content` should be after (optional) `.breadcrumbs`
- It contains optional settings box, optional header and the content area:

- Optional page header consists of a heading text and smaller description:

  #

           Dashboard
            overview & stats

- Please note that page content must be wrapped inside `.row` and `.col-xs-12`

### 5. Settings Box

- Settings box is optional. For more info please see settings box section