Bootstrap Navigation Bar Examples

[{"selector":"#anim-cfc4f57b-55e7-4d1b-a8ef-04b2b508f175 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-28.63159166721232%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-7d448d66-c482-48be-aa6f-acc059739c68","keyframes":[{"offset":0,"transform":"translate3d(0, -192.04333%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.29,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.45,"transform":"translate3d(0, -54.002584396%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.61,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.71,"transform":"translate3d(0, -18.359342348000002%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.8,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.85,"transform":"translate3d(0, -6.894355547%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":0.92,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"},{"offset":0.96,"transform":"translate3d(0, -2.9958759479999997%, 0)","easing":"cubic-bezier(.5, 0, 1, 1)"},{"offset":1,"transform":"translate3d(0, 0%, 0)","easing":"cubic-bezier(0, 0, .5, 1)"}],"delay":0,"duration":1600,"fill":"both"}] [{"selector":"#anim-144b8890-aa45-449a-9541-53fefa09c72f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7a3c2708-b6e6-4663-b575-59523f11b8fd","keyframes":{"transform":["translate3d(0px, 109.94978%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Bootstrap navbar with Smooth border transition

[{"selector":"#anim-20dcf7ef-53e2-4b36-b84c-914df752d5df [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(28.90624987200394%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-93c8f805-d08c-43a0-8d80-270162bfdcc0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0e90d9a9-a63d-449d-8b25-725d3efe6fe5","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Navigation bar with search and user icons

[{"selector":"#anim-fd639938-87cd-4630-8b05-0e99a617bdbd [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-7beed5f7-7cdf-4858-a291-23c05dbf9678","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-abbf54bc-9460-4fec-a0a7-5b74d96e0359","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Bootstrap navigation bar with mega menu

[{"selector":"#anim-1383f51e-5eae-4429-8413-e7a41fb7f613 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-cafc32a8-e083-4241-9bb3-7487b7bce98f","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-d2f01549-53df-4671-bef8-2273b2a1c9c5","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Learn more

Colorful navbar with animation

[{"selector":"#anim-91b2b8e8-8ffb-4e1d-b260-0150781fee12 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.8176489567817145%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-dd5dcb72-0b41-473c-ab63-8f3858350661","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-1b7519e8-80a7-433d-94ba-9975c3c8f719","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] Learn more

Bootstrap Navigation Bar Examples

Bootstrap navbar with Smooth border transition

#1

Navigation bar with search and user icons

#2

Bootstrap navigation bar with mega menu

#3

Colorful navbar with animation

#4