Customizing Site Header Using Frontend “Slots”#
Utilizing frontend plugin slots, site operators now have the ability to customize various portions of the site header.
A “frontend plugin slot” refers to an area of a web page - comprising one or more visual elements - that can be “swapped out” with other visual elements. For example, one new plugin slot allows you to remove the “Help” button in the header.
Overhead and hassle is minimized using the plugin slot system. Site operators
can leverage a plugin slot using a configuration file; the codebase does not
need to be copied (“forked”) nor are extensive changes needed. A snippet of code
is all that is needed to use a plugin slot. A site operator places that code
within a configuration file. Site operators should refer to the src/plugin-slots
directory within each MFE’s codebase to view documentation for that MFE’s plugin
slot(s).
In these release notes, we’ll cover three example use cases for the header. Full documentation is available within the frontend-component-header codebase.
Simple example: Removing help button#
In the default learner dashboard header, the content contains a “Help” button to the left of the logged in user’s username:
With frontend plugin slots, you can now hide the “Help” button:
For site operators, see Sample env.config.jsx code for this example.
Medium-effort example: Replacing “Course Info” with a custom component#
In the default learner dashboard header, the content contains information about the current course’s organization and title in the top left corner:
With frontend plugin slots, you can now create your own custom component (in this case, an icon of a book) in place of the course info component:
For site operators, see Sample env.config.jsx code for this example.
Advanced example: Replacing the entire header#
It is possible to replace the entire header using your own custom code. We currently don’t have an example of how to do that, but if you go this route on your site, please feel free to make a pull request to add your example to this release note!
See also