Search boxes enable search functionality on a page and are typically used in a navigation bar.
The component expands to the full width of its container by default.
This component integrates with
.p-navigation__nav for both small and large screens.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins // this only needs to happen once in a given project @import 'vanilla-framework/scss/vanilla'; @include vf-base; @include vf-p-search-box; // search box uses icons for its buttons, so you need to include them as well @include vf-p-icons-common; @include vf-p-icon-close; @include vf-p-icon-search;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use search box in React by installing our react-component library and importing
For more interactive information adding search view the navigation component.