University of Central Florida

The University Header

One script tag puts the UCF bar at the top of your site. It is the shared piece of chrome that marks a page as part of the university.

v4.0.0

Installation

Paste this immediately after your opening <body> tag. Nothing else is required — no stylesheet, no markup, no configuration.

<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header.js"></script>

The bar inserts itself as the first element in the body. If you need it somewhere specific instead, put an empty <div id="ucfhb"></div> where you want it and the script will use that.

Already embedded?

Then you have nothing to do. v4 is served from the same URL as v3, so every site that already has the snippet gets the new bar automatically.

Options

Flags are passed as query parameters on the script's src. They require the tag to keep its id="ucfhb-script".

OptionEffect
use-1200-breakpoint Widens the bar's container to 1140px on screens 1200px and up, to line up with a wider grid.
use-full-width Runs the bar edge to edge with a 15px gutter, for full-width layouts. Includes the wider breakpoint, so the two never need combining.
use-bootstrap-overrides Retained but inert. Bootstrap 2.x support was dropped in 4.0.0. The flag is still accepted so existing embeds keep working; it no longer does anything. 
<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header.js?use-full-width=1"></script>

Preview them on this page

What changed in 4.0.0

This is a full rebuild. Visually it is the new university brand: the stacked UCF mark, a taller bar, and inline SVG icons throughout. The right-hand side keeps the sign-in tray you know — UCF SIGN IN opening onto workday, myUCF, Email and webcourses — but the search beside it now starts collapsed behind its gold button and opens leftward when you click it.

The spritesheet is gone. Every label in the bar, the two-tone myUCF and webcourses lockups included, is now real text, and every icon is inline SVG. That means the tray's links are selectable, translatable, readable by a screen reader and crawler alike, and sharp at any zoom or pixel density — none of which a PNG slice could be.

Underneath, the bar now renders inside a shadow root. That is the change most likely to affect you, and it cuts both ways: your site's CSS can no longer accidentally break the header, and it can no longer deliberately restyle it either.

If you were overriding header styles

CSS rules targeting the bar's internals — #ucfhb-search-field, #ucfhb-signon, and the rest — no longer apply, and the same goes for JavaScript that reaches in with document.querySelector. The header is a locked brand asset and is not meant to be restyled. If an override was working around a real problem, open an issue, or pin to v3 while it is fixed.

Also worth knowing

  • The bar is 72px tall on desktop and 60px on narrow screens, up from 50px. Your content sits 22px lower than it used to.
  • There is no mobile menu toggle any more. Below 768px the sign-in tray drops beneath the bar as a full-width row when you open it, overlaying the top of your page rather than pushing it down — the bar itself stays 60px.
  • Only one panel opens at a time. Opening the tray closes the search and vice versa; there is not room in a 940px bar for both.
  • The header is now a single file. It no longer requests bar/css/bar.css — the styles are inlined. The old CSS files are still served this release and will be removed in 4.1.0.
  • university-header-full.js is gone. A source map is published next to the minified file instead.

Accessibility

  • The bar is a labelled complementary landmark, deliberately not a second banner competing with your page's own.
  • Both panels open by click or keyboard, Escape closes either one, and focus returns to the trigger.
  • The tray's four links are genuinely hidden while it is closed — they are not in the tab order and not in the accessibility tree until you open it.
  • Focus indicators use a double ring that stays visible against the black bar, white text, and the gold button alike.
  • All transitions are disabled under prefers-reduced-motion.
  • The link home carries real text — "University of Central Florida" — at every width, including where it is visually hidden.

The bar is tested against WCAG 2.2 AA with axe on every build, across Chromium, Firefox, and WebKit.

Rolling back to v3

If v4 breaks something on your site and you need time, v3 stays available at a permanent URL. Change the one line:

<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header-v3.js"></script>

This is a stopgap, not a supported long-term configuration — v3 will not receive further updates. Please open an issue so the problem can be fixed in v4.