todo-list.md 0000644 00000002232 15025016457 0007010 0 ustar 00 ---
layout: page
title: Todo List Plugin
---
The todo list plugin provides simple functionality to the todo list component.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Activate the plugin by adding `data-widget="todo-list"` to the ul element. If you need to provide onCheck and onUncheck methods, please use the jQuery API.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
```js
$('#my-todo-list').TodoList({
onCheck: function(checkbox) {
// Do something when the checkbox is checked
},
onUnCheck: function(checkbox) {
// Do something after the checkbox has been unchecked
}
})
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|onCheck | Function | Anonymous Function | Handle checkbox onCheck event. The checkbox is passed as parameter to the function.
|onUnCheck | Function | Anonymous Function | Handle checkbox onUnCheck event. The checkbox is passed as parameter to the function.
|---
{: .table .table-bordered .bg-light}
toasts.md 0000644 00000003760 15025016457 0006416 0 ustar 00 ---
layout: page
title: Toasts Plugin
---
The toasts plugin provides simple functionality to create easily a bootstrap toast.
##### Usage
This plugin can be activated as a jQuery plugin.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
```js
$(document).Toasts('create', {
title: 'Toast Title',
body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
})
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|position | String | Position.TOP_RIGHT | Position of the toast, available options: `topRight`, `topLeft`, `bottomRight` & `bottomLeft`
|fixed | Boolean | true | Whether to set toasts container fixed.
|autohide | Boolean | false | Whether to auto hide toast
|autoremove | Boolean | true | Whether to auto remove toast after closing
|delay | Integer | 1000 | Auto Hide delay
|fade | Boolean | true | Whether to fade toast
|icon | String | null | Icon class (e.g. `fas fa-exclamation-triangle`)
|image | String | null | Image url
|imageAlt | String | null | Image alt
|imageHeight | String | '25px' | Image size of toast
|title | String | null | Title of toast
|subtitle | String | null | Subtitle of toast
|close | Boolean | true | Whether to add close button to toast
|body | String | null | Body of toast
|class | String | null | Additional classes for the toast
|---
{: .table .table-bordered .bg-light}
##### Events
{: .mt-4}
All event are sent to `body`.
|---
| Event Type | Description
|-|-
|init.lte.toasts | Fired when constructor is done
|created.lte.toasts | Fired when the toast is created
|removed.lte.toasts | Fired when the toast is removed
{: .table .table-bordered .bg-light}
Example: `$('body').on('created.lte.toast', handleCreateEvent)`
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|create | Creates a toast
{: .table .table-bordered .bg-light}
Example: `$(document).Toasts('create', {title: 'Toast Title'})`
treeview.md 0000644 00000004047 15025016457 0006732 0 ustar 00 ---
layout: page
title: Treeview Plugin
---
The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Add `data-widget="treeview"` to any `ul` or `ol` element to activate the plugin.
```html
```
###### jQuery
{: .text-bold }
```js
$('ul').Treeview(options)
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|accordion | Boolean | TRUE | Whether to collapse the open menu when expanding another.
|trigger | String | `[data-widget="treeview"] .nav-link` | Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu.
|expandSidebar | Boolean | FALSE | Whether to expand sidebar on open menu.
|sidebarButtonSelector | String | `[data-widget="pushmenu"]` | Selector of the sidebar button.
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this.
> ```html
>
...
> ```
{: .quote-info}
> ##### IMPORTANT!
> If you want to use a multiple treeview's beside the main-sidebar treeview,
> then you need to add to all treeview's a ID-tag.
> ```html
>
...
> ```
{: .quote-danger}
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|expanded.lte.treeview | Triggered after a sub menu expands.
|collapsed.lte.treeview | Triggered after a sub menu collapses.
|load.lte.treeview | Triggered after the plugin initialized via data api.
{: .table .table-bordered .bg-light}
Example: `$('ul').on('expanded.lte.treeview', handleExpandedEvent)`
card-widget.md 0000644 00000013514 15025016457 0007271 0 ustar 00 ---
layout: page
title: Card Widget Plugin
---
The card widget plugin provides the functionality for collapsing, expanding and removing a card.
### Usage
This plugin can be activated as a jQuery plugin or using the data API.
#### Data API
This plugin provides two `data-api` attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
##### `data-card-widget="collapse"`
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
Collapsible Card Example
The body of the card
```html
Collapsible Card Example
The body of the card
```
{: .max-height-300}
##### `data-card-widget="remove"`
This attribute, when attached to a button, allows the box to be removed when clicked.
Removable Card Example
The body of the card
```html
Removable Card Example
The body of the card
```
{: .max-height-300}
##### `data-card-widget="maximize"`
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
Maximizable Card Example
The body of the card
```html
Maximizable Card Example
The body of the card
```
{: .max-height-300}
###### jQuery
{: .text-bold }
To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-card-widget` selectors.
```js
$('#my-card').CardWidget(options)
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|collapseTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for collapsing the box.
|removeTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for removing the box.
|maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing the box.
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this.
> ```html
>
> ```
{: .quote-info}
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|expanded.lte.cardwidget | Triggered after a card expanded.
|collapsed.lte.cardwidget | Triggered after a card collapsed.
|maximized.lte.cardwidget | Triggered after a card maximized.
|minimized.lte.cardwidget | Triggered after a card minimized.
|removed.lte.cardwidget | Triggered after a card removed.
{: .table .table-bordered .bg-light}
Example: `$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)`
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|collapse | Collapses the card
|expand | Expands the card
|remove | Removes the card
|toggle | Toggles the state of the card between expanded and collapsed
|maximize | Maximizes the card
|minimize | Minimizes the card
|toggleMaximize | Toggles the state of the card between maximized and minimized
{: .table .table-bordered .bg-light}
Example: `$('#my-card-widget').CardWidget('toggle')` or `$('#my-card').CardWidget('toggle')`
direct-chat.md 0000644 00000002130 15025016457 0007256 0 ustar 00 ---
layout: page
title: Direct Chat Plugin
---
The direct chat plugin provides simple functionality to the direct chat component.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Add `data-widget="chat-pane-toggle"` to a button to activate the plugin.
```html
```
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to toggle the chat contact pane.
```js
$('#chat-pane-toggle').DirectChat('toggle')
```
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|toggle | Toggles the state of the chat pane between hidden and visible.
{: .table .table-bordered .bg-light}
Example: `$('#chat-pane-toggle').DirectChat('toggle')`
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|toggled.lte.directchat | Triggered after a direct chat contacts pane is toggled.
{: .table .table-bordered .bg-light}
Example: `$('#toggle-button').on('toggled.lte.directchat', handleToggledEvent)`
expandable-tables.md 0000644 00000004765 15025016457 0010462 0 ustar 00 ---
layout: page
title: Expandable Table Plugin
---
The expandable table plugin provides simple functionality to create expandable tables.
##### Example Code
```html
183
219
657
```
{: .max-height-300}
> ##### Tip!
> You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header.
{: .quote-info}
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class.
```html
657
```
> ##### Tip!
> To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body.
{: .quote-info}
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row.
```js
$('#expandable-table-header-row').ExpandableTable('toggleRow')
```
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|toggleRow | Toggles the state of the expandable table body between hidden and visible.
{: .table .table-bordered .bg-light}
Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')`
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|expanded.lte.expandableTable | Triggered after a expandable table body is expanded.
|collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed.
{: .table .table-bordered .bg-light}
Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)`
sidebar-search.md 0000644 00000004144 15025016457 0007752 0 ustar 00 ---
layout: page
title: Sidebar Search Plugin
---
The sidebar search plugin provides the functionality to search menu items from the sidebar menu entries.
##### Usage
This plugin can be activated as a jQuery plugin or using the data API.
###### Data API
{: .text-bold }
Activate the plugin by adding the following data-attribue `data-widget="sidebar-search"` to a input-group inside the sidebar. You can use the HTML Markup below for a quick start.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
```js
("[data-widget="sidebar-search"]").SidebarSearch(options)
```
##### HTML Markup
Place this HTML Markup after `div.user-panel`.
```html
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
| arrowSign | String | '->' | Arrow Sign between the menu item path.
| minLength | Number | 3 | Min search query length.
| maxResults | Number | 7 | Max search results to display.
| highlightName | Boolean | TRUE | Whether to highlight menu item name.
| highlightPath | Boolean | FALSE | Whether to highlight menu item path.
| highlightClass | String | 'text-light' | Hightlight class.
| notFoundText | String | 'No element found! | Response text if no menu item found.
{: .table .table-bordered .bg-light}
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|init | Init's the SidebarSearch Plugin and registers all visible menu items.
|toggle | Toggles the search dropdown list.
|close | Closes the search dropdown list.
|open | Opens the search dropdown list.
|search | Triggers a search.
{: .table .table-bordered .bg-light}
Example: `$('[data-widget="sidebar-search"]').SidebarSearch('toggle')`
card-refresh.md 0000644 00000006277 15025016457 0007454 0 ustar 00 ---
layout: page
title: Card Refresh Plugin
---
The card refresh plugin provides the functionality for loading ajax content into the card.
##### Usage
This plugin can be activated as a jQuery plugin or using the data API.
###### Data API
{: .text-bold }
Activate the plugin by adding a button with `data-card-widget="card-refresh"` to the card and provide the required `data-source="/URL-TO-CONTENT"` option. By doing that, the plugin will automatically create a GET request to the provided URL and render the returned response the `.card-body` section of the card. If you need to process the returned response before rendering, you should use the jQuery API, which provides hooks to deal with the response.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
```js
$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
| source | String | '' | The URL to the source.
| sourceSelector | String | '' | A selector to get return only the content of the selector.
| params | Object | {} | GET query paramaters (example: {search_term: 'layout'}, which renders to URL/?search_term=layout)
| trigger | String | `[data-card-widget="card-refresh"]` | The CSS selector to the refresh button
| content | String | `.card-body` | The CSS selector to the target where the content should be rendered. This selector should exist within the card.
| loadInContent | Boolean | TRUE | Whether to automatically render the content.
| loadOnInit | Boolean | TRUE | Init plugin on page load.
| loadErrorTemplate | Boolean | TRUE | Whether to append the `errorTemplate` to the card when an ajax error occurs.
| responseType | String | '' | Response type (example: 'json' or 'html')
| overlayTemplate | String | TRUE | The HTML template for the ajax spinner
| errorTemplate | String | `''` | The HTML template for an ajax error message
| onLoadStart | Function | Anonymous Function | Called before the ajax request is made
| onLoadDone | Function | Anonymous Function | Called after the ajax request is made. A `response` parameter is passed to the function that hold the server response.
| onLoadFail | Function | Anonymous Function | Called if the ajax request fails. `jqXHR`, `textStatus` and `errorThrown` parameters are passed to the function.
{: .table .table-bordered .bg-light}
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|loaded.lte.cardrefresh | Triggered after a card is refreshed.
|overlay.added.lte.cardrefresh | Triggered after the overlay added to the card.
|overlay.removed.lte.cardrefresh | Triggered after the overlay removed from the card.
{: .table .table-bordered .bg-light}
Example: `$('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)`
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|load | Reloads the content and runs the `onLoadStart` and `onLoadDone` hooks
{: .table .table-bordered .bg-light}
Example: `$('#my-card [data-card-widget="card-refresh"]').CardRefresh('load')`
layout.md 0000644 00000003071 15025016457 0006411 0 ustar 00 ---
layout: page
title: Layout Plugin
---
The layout plugin manages the layout in case of css failure to reset the height or width of the content.
##### Usage
This plugin is activated automatically upon window load.
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|scrollbarTheme | String | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|scrollbarAutoHide | String | `l` | Scrollbar auto-hide trigger
|panelAutoHeight | Boolean\|Numeric | true | Panel Height Correction (`true` = default correction on load/resize; numeric = offset the correction on load/resize)
|panelAutoHeightMode | String | `min-height` | Panel Height Mode (`min-height` = sets the `min-height`-attribute to the content-wrapper; `height` = sets `height`-attribute to the content-wrapper)
|preloadDuration | Integer | 200 | Preloader Duration (Set in milliseconds)
|loginRegisterAutoHeight | Boolean\|Integer | true | Login & Register Height Correction (`true` = single correction on load; integer = correction with a interval based on the interger)
|---
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this.
> ```html
> ...
> ```
{: .quote-info}
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|fixLayoutHeight | Fix the content / control sidebar height and activates OverlayScrollbars for sidebar / control sidebar
|fixLoginRegisterHeight | Fix the login & register body height
{: .table .table-bordered .bg-light}
Example: `$('body').Layout('fixLayoutHeight')`
control-sidebar.md 0000644 00000005004 15025016457 0010161 0 ustar 00 ---
layout: page
title: Control Sidebar Plugin
---
The control sidebar component is part of AdminLTE's layout as the right sidebar.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below.
###### HTML Markup
{: .text-bold }
```html
```
###### Data api
{: .text-bold }
Add `data-widget="control-sidebar"` to any button or a element to activate the plugin.
```html
Toggle Control Sidebar
```
###### jQuery
{: .text-bold }
Just like all other AdminLTE plugins, you can also activate the toggle button using jQuery by running the following example.
```js
$("#my-toggle-button").ControlSidebar('toggle');
```
##### Options
|---
| Name | Type | Default | Description
|-|-|-|-
|controlsidebarSlide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
|scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
|scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
|target | String | `.control-sidebar` | Target control-sidebar to handle multiple control-sidebars.
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
> ```html
> Toggle Control Sidebar
> ```
{: .quote-info}
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|expanded.lte.controlsidebar | Triggered after a control sidebar expands.
|collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.
|collapsed-done.lte.controlsidebar | Triggered after a control sidebar is fully collapsed.
{: .table .table-bordered .bg-light}
Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|collapse | Collapses the control-sidebar
|show | Show's the control-sidebar
|toggle | Toggles the state of the control-sidebar expanded and collapsed
{: .table .table-bordered .bg-light}
Example: `$('#toggle-button').ControlSidebar('toggle')`
push-menu.md 0000644 00000003551 15025016457 0007020 0 ustar 00 ---
layout: page
title: Push Menu Plugin
---
The PushMenu plugin controls the toggle button of the main sidebar.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Add `data-widget="pushmenu"` to a button to activate the plugin.
```html
```
###### jQuery
{: .text-bold }
```js
$('.sidebar-toggle-btn').PushMenu(options)
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
|enableRemember | Boolean | FALSE | Remember sidebar state and set after page refresh.
|noTransitionAfterReload | Boolean | TRUE | Hold Transition after page refresh.
|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
> ```html
>
> ```
{: .quote-info}
##### Events
{: .mt-4}
|---
| Event Type | Description
|-|-
|collapsed.lte.pushmenu | Fired when the sidebar collapsed.
|collapsed-done.lte.pushmenu | Fired when the sidebar is fully collapsed.
|shown.lte.pushmenu | Fired when the sidebar shown.
{: .table .table-bordered .bg-light}
Example: `$(document).on('shown.lte.pushmenu', handleExpandedEvent)`
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|toggle | Toggles the state of the menu between expanded and collapsed.
|collapse | Collapses the sidebar menu.
|expand | Expands the sidebar menu
{: .table .table-bordered .bg-light}
Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`
iframe.md 0000644 00000012270 15025016457 0006340 0 ustar 00 ---
layout: page
title: IFrame Plugin
---
The iframe plugin provides the functionality to open sidebar & navbar items in a tabbed iframe.
##### Required Markup
To get the iframe 100% working you need the following content-wrapper markup:
```html
```
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
###### Data API
{: .text-bold }
Activate the plugin by adding `data-widget="iframe"` to the `.content-wrapper`. If you need to provide onCheck and onUncheck methods, please use the jQuery API.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events.
```js
$('.content-wrapper').IFrame({
onTabClick(item) {
return item
},
onTabChanged(item) {
return item
},
onTabCreated(item) {
return item
},
autoIframeMode: true,
autoItemActive: true,
autoShowNewTab: true,
autoDarkMode: false,
allowDuplicates: true,
loadingScreen: 750,
useNavbarItems: true
})
```
##### Options
{: .mt-4}
|---
| Name | Type | Default | Description
|-|-|-|-
|onTabClick | Function | Anonymous Function | Handle tab click event.
|onTabChanged | Function | Anonymous Function | Handle tab changed event.
|onTabCreated | Function | Anonymous Function | Handle tab created event.
|autoIframeMode | Boolean | true | Whether to automatically add `.iframe-mode` to `body` if page is loaded via iframe.
|autoItemActive | Boolean | true | Whether to automatically set the sidebar menu item active based on the active iframe.
|autoShowNewTab | Boolean | true | Whether to automatically display created tab.
|autoDarkMode | Boolean | false | Whether to automatically enable dark-mode in iframe pages.
|allowDuplicates | Boolean | true | Whether to allow creation of duplicate tab/iframe.
|allowReload | Boolean | true | Whether to allow reload non duplicate tab/iframes.
|loadingScreen | Boolean/Number | true | [Boolean] Whether to enable iframe loading screen; [Number] Set loading screen hide delay.
|useNavbarItems | Boolean | true | Whether to open navbar menu items, instead of open only sidebar menu items.
|---
{: .table .table-bordered .bg-light}
##### Methods
{: .mt-4}
|---
| Method | Description
|-|-
|createTab| Create tab by title, link & uniqueName. Available arguments: title `String`, link `String`, uniqueName `String`, autoOpen `Boolean/Optional`.
|openTabSidebar| Create tab by sidebar menu item. Available arguments: item `String|jQuery Object`, autoOpen `Boolean/Optional`.
|switchTab| Switch tab by iframe tab navbar item. Available arguments: item `String|jQuery Object`.
|removeActiveTab| Remove active iframe tab.
{: .table .table-bordered .bg-light}
Example: `$('.content-wrapper').IFrame('createTab', 'Home', 'index.html, 'index', true)`
navbar-search.md 0000644 00000005400 15025016457 0007606 0 ustar 00 ---
layout: page
title: Navbar Search Plugin
---
The navbar search plugin provides the functionality to show/hide a search input across the whole header.
##### Usage
This plugin can be activated as a jQuery plugin or using the data API.
###### Data API
{: .text-bold }
Activate the plugin by adding the following data-attribue `data-widget="navbar-search"` to the `.navbar-search-block` inside the header. You can use the HTML Markup below for a quick start.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
```js
("[data-widget="navbar-search"]").SiteSearch(options)
```
##### HTML Markup
Place this HTML Markup after inside the header.
```html
```
Or you can place the search button inside the navbar as nav-item with this markup:
```html